角2子参照可变进父

Question

如何改变一个变量的值或在从一个子组件父组件使用的方法，而不使用输入和输出

我尝试这样的事情，但不工作。

@Component({ 
    selector: 'child', 
    template: ` 
    <div> 
     <h2>{{name}}</h2> 
     <button (click) = "rename()" > Rename Parent </button> 
    </div> 
    `, 
}) 
export class Child { 
    name:string; 
    constructor() { 
    this.name = 'child' 
    } 

    rename() { 
    App.name = 'Rename'; 
    } 

} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
    </div> 
    <child> </child> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = 'Angular2' 
    } 
} 

例如这里

plunker example

Answer 1

输入和输出都只是本作。根据Angular2文档，它是为父母和子女组件之间的沟通而作出的。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
    </div> 
    <child [name]="this.name" (nameChanged)="this.name = $event"> </child> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = 'Angular2' 
    } 
} 

@Component({ 
    selector: 'child', 
    template: ` 
    <div> 
     <h2>{{name}}</h2> 
     <button (click) = "rename()" > Rename Parent </button> 
    </div> 
    `, 
}) 
export class Child { 

@Input() name:string; 
@Output() nameChanged: EventEmitter<string> = new EventEmitter<string>(); 

    constructor() { 
    } 

    rename() { 
    this.nameChanged.emit('Renamed'); 
    } 

} 

或者，您可以将服务注入到父组件和子组件中，父组件和子组件都具有父组件和子组件可以访问和修改的一些值。但请确保将该服务添加到只有父组件或只有AppModule，否则您将获得2个服务实例。

Answer 2

也就是说@Output和@input在角2 文档：https://angular.io/docs/ts/latest/cookbook/component-communication.html

• 另一种方式是可观的，主题也可以注入从子组件的数据，以根组件或从另一个组件成分：见这个视频：https://www.youtube.com/watch?v=U2qJxfi7370&list=PLFaW_8zE4amNEdKZOJD3P_GeV3Hgva7RD&index=10