level0、level1およびという 3 つのネストされたコンポーネントがありlevel2、次のように定義されています。

コンソールでは、次のように表示されると予想していました。

しかし、代わりに次のように表示されます。

私は何が欠けていますか？コンポーネントがを介してLevel0アクセスできないのはなぜですか?Level2@ViewChild

のメソッドにアクセスするLevel2方法はありLevel0ますか?

ここにplnkrがあります

別のコンポーネント内にコンポーネントを動的にロードしようとしていますが、以前は機能していましたが、ベータ 16 に更新すると停止しました。変更ログを読んでコードを変更しましたが、まだ成功していません。

@ViewChild から取得したものをコンソールに記録しました。ViewContainerRef を取得すると思われますが、ElementRef を取得するとエラーが発生します。これを解決する方法

私のコンソールログのコードとスクリーンショットを見てください

}

HTML コード

HTML 要素が DOM に追加された場合 (たとえば、ボタンをクリックした後)、この要素にアクセスするにはどうすればよいでしょうか? viewChild はそれを見ることができません。

更新 1:説明の追加

jquery データテーブル ( jquery.dataTables enrollTyped version ) を使用しました。このリンクに基づいて、新しい列を追加し、その中に html を定義できます。私はこのコードを書きました：

Chrome 開発者ツールを使用すると、次のように表示されます。

最初のアンカー タグは機能しますが、routerLink ではなく href で機能します。

angular ディレクティブが href に準拠していないため、2 番目のアンカー タグが機能しません。

DynamicComponentLoader を使用してコンパイルしようとしましたが、コードを次のように変更しました。

しかし、viewChild で #target 要素にアクセスできません (loadNextToLocation で別のコンポーネントに変更したい)。これは、良い結果を得るための最適化された方法ではないと思います。

jqueryデータテーブル内のコマンドボタンでrouterLinkを使用したい。

これを解決するために正しい方向に私を助けてもらえますか?

前もって感謝します。

解決 ：

JavaScript や何らかのコールバック関数を使用して HTML を DOM に追加する場合は、最初にテンプレートから、将来それらの要素の親になるタグを決定します。

1. この親要素にテンプレート変数を追加します。 (例: #target)

   /li>

2. 次に、単純なクラスと単純な属性を html コードに追加します (このコードは、angular でコンパイルされたページの後に生成されます。また、typescript または javascript でコードを記述して html を生成することもできます)。

   /li>

3. これらのソースをコンポーネントにインポートして挿入します。

   と ：

   /li>

4. コンポーネント クラスで viewChild 変数を定義します。

   /li>

5. 次のような関数を書きます。

   }

6. この関数を呼び出すのに最適な場所を見つける必要があります。たとえば、ajax データ コールバックは 1 つの選択肢であり、その中で AfterEverything() を呼び出します。この関数は ngAfterViewInit() 内で呼び出すことができます。

すべての新しい要素が確実に作成されるようにするには、数秒の遅延が必要になる場合があることに注意してください。

この plnkerはおそらく問題を確認する最も簡単な方法です

ViewChild を使用するときの明らかな落とし穴なのかどうかはわかりませんが、非常に奇妙です。

プランカーは 3 つの入力を示しています。

• 最初の入力は、基本的な入力と、それをフォーカスできるボタンです。
• 2 番目の入力は同じ値にバインドされており、[編集] をクリックすると入力のロックが解除されます。
• 3 番目の入力も同じ値にバインドされており、[編集] をクリックすると入力のロックが解除され、フォーカスが与えられます。

ただし、ViewChild を追加して入力への参照を取得すると、入力に対する NgModel バインディングが機能しなくなります。ただし、アタッチする他のバインド (無効化など) は引き続き機能します。app/extended.component の 52 行目をコメントアウトすると、再びバインドされますが、明らかにフォーカスできなくなります。

最初の入力/ボタンは、これが明らかに、拡張しているクラスのプロパティにバインドしている場合にのみ問題であることを示しています。

つまり、ViewChild を介して入力にアクセスすると、NgModel へのバインディングが壊れます。

つまり、プロパティ「someValue」を持つベースが与えられた場合:

バインドしない:

Ionic 2 で小さなアプリを作成しようとしていますが、ナビゲートできません...ドキュメント、ナビゲーション関連、navController、StackOverflow に関するいくつかの投稿を読みました...何時間も試しましたが、行き詰まりました! いくつかの問題がありました。

app.js で使用する方法を見つける必要がnavControllerありましたが、これは StackOF のおかげで@viewChild実現できました。原理がよくわかりません。設定しrootPage: any = Login;ました。アプリにメニューがあるので、このページで無効にしました。ボタン(click)で、ルートthis.nav.setRoot()を で設定しHomePageます。メニュー内の HomePage から、いくつかのページをナビゲートしたいと思います。私はここで立ち往生しています。(click)="openPage(Messagerie)"メソッドを使用しました。最初の問題は、openPage() のパラメーターが未定義です。[navPush]="pageMessagerie"次に、ドキュメントに従ってandメソッドを試しましたthis.pageMessagerie = Messagerie;が、うまく機能せず、何も起こりませんでした。そのため、ページを openPage() 関数にハードコーディングしようとしました:this.nav.push(Messagerie);. ここで、また別の問題があります。初めて push() を呼び出すと、ページが表示されてすぐに消え、HomePage に戻ってきます。2回目にクリックすると、うまくいくようです。Messagerie ページに移動し、ナビゲーション バーの [戻る] ボタンを使用して HomePage に戻ることができます。

だから...ここで私は、ナビゲーションで立ち往生しています！どうすればいいのかわからない。これが私のコードです。

更新 OK 未定義は OK になりました。しかし、私のナビはまだ奇妙な動作をします。ホームページで使用するthis.nav.push()と、次のワークフローが得られました。Messagerie をクリックします。Messagerie を開き、すぐにホームページに戻ります。Demandes をクリックします: Messagerie を開き、すぐに Demandes を開き、そこにとどまります。ナビゲーション バーの戻るボタンをクリックします。Messagerie に戻り、Demandes に戻り、ホームページに戻ります。もちろん、this.nav.setRoot()毎回使用すると機能しますが、ナビゲーションの原則が失われます。

App.html

App.ts

Login.ts (setroot を使用)

私は何かが恋しいですか？私は何を間違っていますか？助けてくれてありがとう！