角2模板约定

Question

对于我在角2中遇到的每一个例子，模板都驻留在组件装饰器中。

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

这是正确的约定吗？当模板变得复杂时，我会想象这种语法变得很麻烦。

我尝试过使用templateUrl而不是模板。但据我所知，它将通过ajax加载模板。(有点关联，但是自从我更新到2.0.0-rc.3之后，templateUrl似乎不再起作用了，但也许我做错了什么)。

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

Answer 1

您可以在templateUrl中使用rc3；以下是基本组件的模板代码：

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链接内联模板。也有可用的Gulp任务来完成这个任务。

Answer 3

官式指南

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

可能建议您将样式和模板隔离到不同的文件中。

但是同时，如果您要传送一个组件，那么单个组件文件将使它变得简单和独立。所以这是关于你的要求。如果您希望独立地重用您的组件，这种将模板文件嵌入组件中的方法将获胜。最后这是你的选择。

希望这能帮到你。谢谢。