[Angular 2] 2. Child Compoment

  • Child compoment should be defined before the parent component.
  • Notice that in addition to using the <child> element in the parent template, you also need to add ChildComponent in ParentComponent's list of directives.
<!-- index.html -->
<html>
<head>
    <title>Angular 2 Quickstart</title>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>
</head>
<body>
<!-- The app component created in app.ts -->
<parent></parent>
<script>System.import('app');</script>
</body>
</html>

 

/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'child'
})
@View({
    template: `
    <p> {{ message }} </p>
  `
})
class ChildComponent {
    message: string;
    constructor() {
        this.message = "I'm the child";
    }
}

@Component({
    selector: 'parent'
})
@View({
    template: `
    <h1>{{ message }}</h1>
    <child></child>
  `,
    directives: [ChildComponent]
})
class ParentComponent {
    message: string;
    constructor() {
        this.message = "I'm the parent";
    }
}

bootstrap(ParentComponent);

 

posted @ 2015-08-17 04:13  Zhentiw  阅读(350)  评论(0)    收藏  举报