2016-04-26 74 views

回答

8

[]用于从子组件中的值绑定到子组件中的@Input()。它允许传递对象。

{{}}对于结合属性和HTML等

<div somePropOrAttr="{{xxx}}">abc {{xxx}} yz</div> 

其中结合可以是一个字符串的一部分。

()是用于绑定的事件处理程序时,DOM事件被激发被称为或子组件上的EventEmitter发出事件

@Component({ 
    selector: 'child-comp', 
    template: ` 
    <h1>{{title}}</h1> 
    <button (click)="notifyParent()">notify</button> 
    `, 
}) 
export class ChildComponent { 
    @Output() notify = new EventEmitter(); 
    @Input() title; 

    notifyParent() { 
    this.notify.emit('Some notification'); 
    } 
} 


@Component({ 
    selector: 'my-app', 
    directives: [ChildComponent] 
    template: ` 
    <h1>Hello</h1> 
    <child-comp [title]="childTitle" (notify)="onNotification($event)"></child-comp> 
    <div>note from child: {{notification}}</div> 
    `, 
}) 
export class AppComponent { 
    childTitle = "I'm the child"; 

    onNotification(event) { 
    this.notification = event; 
    } 
} 

Plunker example

的更多细节https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax

+0

我想要[]和{{}}之间的区别不是[]和()。 –

相关问题