web-dev-qa-db-ja.com

コンポーネントテンプレートとtemplateUrlの使用の違い

Angular 2では、 `文字を使用して引用することにより、複数行のテンプレートを記述できます。複数行のテンプレートを.htmlファイルに配置し、templateUrlで参照することもできます。

テンプレートをコンポーネントに直接配置するのは快適なように思えますが、それはすべて1か所にあるためですが、そうすることには欠点がありますか？

第一のアプローチ：

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: `
    <h1>My First Angular 2 multiline template</h1>
    <p>Second line</p> 
    `
})
export class AppComponent { }

対2番目のアプローチ：

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    templateUrl: 'multi-line.html'
})
export class AppComponent { }

multi-line.htmlとともに：

<h1>My First Angular 2 multiline template</h1>
<p>Second line</p>
angularangular2-template
14
Andris Krauze

最終的なアプリケーションがどのように機能するかという点では、埋め込みテンプレートと外部テンプレートの間に実質的な違いはありません。

ただし、開発者にとっては、考慮しなければならない多くの違いがあります。

  1. HTMLが別の.htmlファイルにある場合、ほとんどの場合、エディター/ IDEでコード補完とインラインサポートが向上します。 （少なくとも、IntelliJ IDEAはインラインテンプレートと文字列のHTMLをサポートしています）
  2. 同じファイルにコードと関連するHTMLを含めることには便利な要素があります。この2つが互いにどのように関係しているかを確認するのは簡単です。

これら2つのことは多くの人々にとって同じ価値があるので、あなたが好きなものを選んで、これだけがあれば人生を進めます。

しかし、私の意見では、テンプレートをコンポーネントに保持する必要がある理由に私たちを導きます：

  1. 現在、Angular 2.に立っているため、外部テンプレートの相対ファイルパスを使用する を作成することは困難です .
  2. 外部テンプレートに非相対パスを使用すると、コンポーネントの深さに応じて変化するルートからの/where/is/my/template型参照をすべて管理する必要があるため、コンポーネントの移植性が大幅に低下します。

そのため、テンプレートをコンポーネント内に簡単に見つけられる場所に保管することをお勧めします。また、インラインテンプレートが大きくなり、扱いにくいことがわかった場合は、おそらく、コンポーネントをいくつかの小さなコンポーネントに分割する必要があることを示しています。

24
Michael Oryl

欠点は、IDEツールは上記のように強力ではなく、コンポーネントに大きなHTMLチャンクを配置すると読みにくくなることです。

また、angular2スタイルガイドに従っている場合は、doにテンプレートを抽出することをお勧めします3行を超える場合はファイルを分離します。

Angular2スタイルガイドから：

Doは、3行を超える場合、テンプレートとスタイルを個別のファイルに抽出します。

理由？（.jsおよび.ts）コードファイルのインラインテンプレートの構文ヒントは、一部のエディターではサポートされていません。

理由？コンポーネントファイルのロジックは、インラインテンプレートおよびスタイルと混在しない場合、読みやすくなります。

ソース

13
swestner

コンポーネントHTMLで構成される文字列リテラルをtemplateに渡すことができます。これにより、TypeScriptコードと同じファイルにHTMLソースが含まれます。

templateUrlを使用すると、テンプレートHTMLを含む外部ファイルを参照します。これにより、HTMLとTypeScriptを別々のファイルに保存できます。

外部ファイルでは、通常、オートコンプリートと構文チェックのサポートが優れていますが、すべてのコンポーネントが1つではなく複数のファイルで構成されているため、扱いにくい場合があります（スタイルもあります）。外部ファイルはビルドステップでインライン化する必要があります。そうしないと、すべてのテンプレートファイルをロードするためのサーバーリクエストが大量に発生します。

Angular2スタイルガイドでは、3行を超えるインラインテンプレートを使用しないことを推奨しています。

2
Günter Zöchbauer

ほとんどの答えはエディターのサポートに関連しているように見えますが、その議論は正しいものの、htmlとcssを.htmlと.cssファイルに入れることの長所としては主張しません。

Htmlファイルとcssファイルを分離する主な理由は、 [〜＃〜] srp [〜＃〜] に従うためです。 AngularはTypeScriptのレイアウトのバージョンと構文を変更するため、コードの移植性と再利用が容易になります。HTMLとCSSはほとんど同じままです。

1
Jdahern

今働いているようです。

@Component({
  selector: 'my-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})

「herosのツアー」から取得 https://angular.io/docs/ts/latest/tutorial/toh-pt5.html .

[email protected]

0
Nuno Ribeiro