angular - Angular 2、コンポーネントを異なるファイルに分割

Question

実際に angular.io クイックスタートを作成していますが、コンポーネントを別のファイルに分割する必要があります。

問題は、それを行う方法がまったくわからないことであり、開発プレビュードキュメントでは説明されていません。

手伝ってくれますか？

単純に 2 つのコンポーネント (app.js のメインと、情報のみをリストする別のコンポーネント) があります。

前もってありがとう

score 6 · Accepted Answer

これは十分に説明されておらず、多くの例では単一のコンポーネントまたは単一のファイル内のコンポーネントのみを使用しています。これは、(現在) 2 つのコンポーネントを別々のファイルで使用して構築している例であり、作成できるのと同じくらい簡単です...

基本的に、サブコンポーネントをそのモジュールからエクスポートする必要があります...

export default NoteComponent;

それを構成モジュールまたは親モジュールにインポートします...

import NoteComponent from "note";

ああ、このインポート/エクスポートはES6モジュールの構文です。ここで素晴らしい参照

お役に立てれば。

score 2 · Accepted Answer

この例は ES6 ですが、どの言語にも同じ原則が適用されます。インポートを使用するだけで、コードを適切なファイルにトランスパイルし、モジュールローダーを適切に構成してください。

この例には 3 つのファイルがあります: main.es6.js、a1.es6.jsおよびa2.es6.js- plunker システムはこれらのファイルをmain.js、a1.jsおよびa2.js

のシステムオプションはindex.html、モジュールローダーにこれらの検索方法を指示するためimport {A1} from 'a1'、トランスパイルされたファイルからクラスが検索されa1.jsます。

score 0 · Accepted Answer

公式参照によると、templateプロパティを次のように変更するだけtemplateUrlです：

@Component({
  selector: 'my-app',
  //template: `Hi, {{name}}`,
  templateUrl: './app.html'
})
export class AppComponent  { name = 'Peter'; }

4 に答える 4