ng-zorro使用心得

前言

今週はng-zorroを使ってプロジェクトの原型を作って、それに対しても一定の理解があって、総じて言えば難しくなくて、 boostrapでそれを理解することができて、黄庭祥の初期化の仕事がよくできたため、書く過程で出会った問題はそんなに面倒ではありませんて、祥兄に感謝します.

問題一、buttonが効かない

質問説明:buttonボタンを押すと応答がなく、以下の図:画像記述コードは以下の通りです.
解決方法:

まずbuttonの中のすべてのスタイルを削除して、最も基本的なhtmlを保留して、依然として応答がないことを発見して、問題がbuttonの身に

ないことを説明します

グリッドレイアウトを調べると、tableラベルがbuttonの同じ行

に置かれていることがわかりました.

新しいrow,col配置table,問題解決

まとめ:ng-zorroのグリッドはbootstrpより厳しく、勝手にコンテンツをネストすることは許されないようです

問題2、routerLinkが効かない

質問説明:buttonでrouterLinkを使用してページジャンプコードを実行できません.

解決方法:

コンソールを開きbuttonをクリックすると、エラーメッセージがないことがわかります

ジャンプ方式をaラベルのherfに変更し、ジャンプ可能であることを発見し、url定義に誤りがないことを説明する

黄庭祥に聞いて、検査して、私が親コンポーネントの中でを書いていないことを発見してルートの出口が不足して、それを追加して、問題は

を解決します

検索バーbuttonが整列していません

質問の説明:公式ドキュメントの検索ボックスを使用する場合、スタイルが公式ドキュメントと一致しない公式スタイル:
コピー後のスタイル:
buttonがinputに付着していないことがわかります.

チェックを開き、コントロールのcssスタイル

を探します.

は、このスタイルを除去することを発見し、buttonの位置は正常

に回復した.
理由:このスタイルは私が自分で追加したもので、複数のbutton間に隙間を持たせるために検索ボックスbuttonのスタイルを上書きし、最後にこのスタイルを除去し、button間の隙間を実現するために使用します.

問題4、左側のナビゲーションバーが下にスクロールできない

質問:左側のナビゲーションバーの内容がページを超えた場合、次の図にスクロールできません.
解決方法:

公式文書のサンプルコードを表示し、比較参照すると、異常

は見えません.

Googleは「ng-zorro submenu overflowed」を検索し、結果は少なすぎます

私たちのナビゲーションバーのコードをすべて注釈して、公式のサンプルコードに変えて、問題が依然として存在することを発見して、私たちの側のナビゲーションバーのスタイルが問題があることを説明します

検査を開き、cssスタイルを調べたところ、position fixが引き起こした災いであることが分かった.それを除去すると、ナビゲーションは

をスクロールすることができる.

まとめ

今週の原型を書く仕事は複雑ではありません.主にドキュメントを見て需要を理解する上でいくつかの問題に直面して、よくやり直してやり直します.また、ng-zorroの公式ドキュメントはあまりそろっていないような気がします.いくつかの機能を書くときはよく推測する必要があります.そして、スタイルを変えると予想できない間違いが発生します.