アングル2/4アプリを手動で初期化するにはどうすればいいですか

コンポーネントmy-app、でアングルアプリを初期化する必要があります。このコンポーネントは、ページの先頭にロードされていないhtmlテンプレート上に存在するエラー：セレクタ「my-app」が要素と一致しませんアングル2/4アプリを手動で初期化するにはどうすればいいですか

これは可能ですか？

出典

2017-07-06 Don Dev

スタートアッププロセスとしてAppモジュールとAppコンポーネントを使用する通常の処理を続けることができます。その定型CLIを使って定型コードを生成しようとしましたか？ – DeborahK

SystemJSを使用している場合は、document.createElement()を使用して要素を動的に作成し、appendChild()を追加してSystem.import()を呼び出してアプリを初期化することができます。これは、必要なすべてのアプリケーション資産とSystemJS設定がすでにロードされていることを前提としています。ここ

HTML

<body> 
    <div id="app"></div> 

    <button type="button" id="foo">Click Me</button> 

    <script src="app.js"></script> 
</body>

JSを

(function() { 
    var button = document.getElementById('foo'); 
    var container = document.getElementById('app'); 

    button.addEventListener('click', function() { 
    var myApp = document.createElement('my-app'); 
    myApp.textContent = 'Loading...'; 

    container.appendChild(myApp); 

    System.import('app') 
     .catch(console.error.bind(console)); 
    }); 
})();

は、機能性を実証plunkerです。 app要素は、ボタンクリックのイベントハンドラ内から作成、追加、初期化されます。

UPDATEあなたはWebPACKのを使用して、ビルド/バンドルプロセスに依存している場合は、メインtranspiledを読み込むことができます/あなたのエラーを回避するために、このquestionでパターンを使用して動的にJSファイルをバンドル。 @angular/cliを使用している場合は、生成されたファイルの識別子がmain.97e5159ded9c783f627a.bundle.jsであるため、これはより困難になる可能性があります。

うまくいけば助けてください！

出典

2017-07-07 01:10:03

ここでその方法を説明します。最初にルートアプリケーションモジュールを作成し、ルートコンポーネントをdeclarationsとentryComponentsに宣言します。 Do notbootstrapコンポーネントに追加してください。次に、ModuleクラスにngDoBootstrapメソッドを定義して、Angularがアプリケーションを自分でブートストラップすることを知らせます。このメソッドの内部ではApplicationRefへの参照を取得し、時刻が来るとAppComponentクラス参照を渡してbootstrapを呼び出します。ここでは、コードは次のようになります。

@NgModule({ 
    imports: [BrowserModule], 
    declarations: [AppComponent], 
    entryComponents: [AppComponent] 
}) 
export class AppModule { 
    ngDoBootstrap(app: ApplicationRef) { 
    // delay bootstrap by 3 seconds 
    setTimeout(() => { 
     app.bootstrap(AppComponent) 
    }, 3000); 
    } 
}

基本的に、これはあなたが指定したboostrapComponentsでbootstrapModule(AppModule);を呼び出すときに角度がボンネットの下に何をするかです。

詳細はHow to manually bootstrap an Angular applicationをご覧ください。

出典

2017-07-07 04:49:09

アングル2/4アプリを手動で初期化するにはどうすればいいですか

答えて

関連する問題