Angular4中如何实现绑定和分包-创新互联

这篇文章主要介绍Angular4中如何实现绑定和分包，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

src目录下的app/app.component.ts文件是一个标准的angular4组件的结构。

上面@component()括号内template属性里用`(这个符号不是单引号，而是键盘1左边、tab键上面的那个符号)包裹的是View，下面export的class部分是Controller。

希望实现的效果长这个样子：

万里长征第一步，先从修改View开始。

修改temlate里的HTML文件，改成下面的样子：

Hello,World
你好,gundam meister
海牛高达

  海牛高达
  NewType

上面部分先充当项目简介。

中间的span假装是高达列表。

下面的div包裹的两个span假装是高达详情。

刷新页面，现在是这个样子的：

好吧我承认和效果图比起来是挫了一点，但是现在先专注于功能实现。

需要实现的功能是：点击高达列表，可以显示高达详情。

正常的情况下，当然不会用常量去渲染页面。而如何沟通Controller和View就是Angular用Model干的事情：绑定。

绑定：你有我有全都有。

在同一个组件（component）内，在class（Controller）里定义的变量名，可以直接在template（View）里使用。

@Component({
  selector: 'my-app',
  template: `
  
Hello,World
  
你好,gundam meister
  {{name}}
  

    {{name}}
    {{type}}
  
  `
})
export class AppComponent {
  name = '海牛高达';
  type = 'NewType';
}

刷新页面，依然可以显示：

当然，gundam其实是一个类，所以现在是model上场的时候了。

定义一个类 gundam：

class Gundam {
  name: string;
  type: string;
}

改写name和type，让他们成为属性值而不是string常量:

gundam: Gundam = {
  name: '海牛',
  type: 'NewType'
};

typescript 的语法有点奇怪，定义某个变量是某种类型的写法，是变量名在前变量类型在后。

改变temple里的引用：

Hello,World
你好,gundam meister
{{gundam.name}}

  {{gundam.name}}
  {{gundam.type}}

刷新页面:

继续review代码。

主页展示的是一个gundam列表而不是某一个gundam，所以用一个gundam数组去冒充数据。

const gundams: Gundam[] = [
  {name: '海牛高达', type: 'NewType'},
  {name: '巴巴托斯', type: '近战'},
  {name: '力天使', type: '射击'}
];

之前的angular提供了ng-repeat的标签来循环列表，不过现在4.0以上的时代变成了标签里一个特殊的修饰：*ngFor。

修改class里的代码，定义一个变量gundams接受数组：

gundams = GUNDAMS;

修改template，用*ngFor循环解析数组，进行数据渲染：

Hello,World
你好,gundam meister

  
    {{gundam.name}}