Angular 2模板約定

Question

對於我在Angular 2中遇到的每個示例，模板都位於組件裝飾器中。

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>Hello world</h1>'
})
export class AppComponent { }

這是正確的約定嗎？ 當模板變得復雜時，我想這種語法會變得很麻煩。

我嘗試使用templateUrl而不是template 。 但是據我了解，Angular然后將通過ajax加載模板。 （略有相關，但是由於我已經更新到2.0.0-rc.3 templateUrl似乎不再起作用，但是也許我做錯了）。

處理模板的最佳方法是什么？

Answer 1

您可以在rc3中使用templateUrl; 請參閱下面的模板代碼，了解基本組件：

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-my-component',
  templateUrl: 'my-component.component.html',
  styleUrls: ['my-component.component.css']
})
export class MyComponentComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

通常，應使用templateUrl來保持組件定義的整潔。

官方ng2教程將幫助闡明一些基本問題，對我有幫助： https ://angular.io/docs/ts/latest/tutorial/

Answer 2

從Angular2樣式指南

| 當超過3行時，請將模板和樣式提取到單獨的文件中。

即將發布的脫機模板編譯器將內聯由templateUrl鏈接的templateUrl 。 也有Gulp任務可用於執行此操作。

Answer 3

官方風格指南

https://angular.io/styleguide#!#05-04

可能建議您將樣式和模板隔離到不同的文件中。

但是同時，如果要運送組件，則單個組件文件將使它變得簡單且獨立。 所以這是關於您的要求。 如果您希望獨立地重用組件，則可以采用將模板文件嵌入組件的方法。 最后，這是您的選擇。

希望這對您有所幫助。 謝謝。

Answer 4

出於以下兩個原因，應使用模板url來編寫html代碼：1.關注點分離：用於項目開發的約定。 2.易於調試：在各種IDE中，您可以使用html lint插件來查找html中的問題。

如果您的html是一兩行，那么您可以內聯使用它。