Angular 2 RC1-从子路径组件属性更新父组件属性

Question

应用组件

@Component({
    selector: 'app',
    template: '<div class="heading">{{heading}}</div>'
})
@Routes([
    {path: '/comp1', component: Comp1Component},
    {path: '/comp2', component: Comp2Component}
])
export class AppComponent {
    heading: string = 'App Component';
}

Comp1Component

@Component({
    selector: 'comp1'
})
export class Comp1Component {
    // how to change heading property of app component from here
    // Want to change heading property of AppComponent to "Component 1"
}

Comp2Component

@Component({
    selector: 'comp2'
})
export class Comp2Component {
    // how to change heading property of app component from here
    // Want to change heading property of AppComponent to "Component 2"
}

我想根据所选的路线更新AppComponent的标题属性吗？

有人可以建议我使用Angular2 RC 1吗？ 以及如何实现呢？

Answer 1

您的安全押注是使用一项服务：

数据服务

import {Injectable} from '@angular/core';

@Injectable()
export class DataService {
    ...
    heading: string;
    ...
    setHeading(newValue) {
        this.heading = newValue; //you can also do validation or other things here
    }
    getHeading() {
        return this.heading;
    }
    ...
}

AppComponent.ts

import {DataService} from './DataService';

@Component({
    selector: 'app',
    providers: [DataService],
    template: '<div class="heading">{{heading}}</div>'
})
@Routes([
    {path: '/comp1', component: Comp1Component},
    {path: '/comp2', component: Comp2Component}
])
export class AppComponent {
    constructor(private dataService: DataService) { }

    heading: string = this.dataService.getHeading();
}

Comp1Component

import {DataService} from './DataService';

@Component({
    selector: 'comp1',
    providers: [DataService]
})
export class Comp1Component {
    // how to change heading property of app component from here
    // Want to change heading property of AppComponent to "Component 1"
    constructor(dataService: DataService) { 
        dataService.setHeading('Component 1');
    }
}

Comp2Component

import {DataService} from './DataService';

@Component({
    selector: 'comp2',
    providers: [DataService]
})
export class Comp2Component {
    // how to change heading property of app component from here
    // Want to change heading property of AppComponent to "Component 2"
    constructor(dataService: DataService) { 
        dataService.setHeading('Component 2');
    }
}

您可以随时更改heading ，只需记住，如果需要在组件构造函数之外执行此操作，则需要将注入的DataService实例定义为private或分配给class属性。

Answer 2

上面建议的方法对我不起作用，但是我通过在服务中使用模型并将模型属性绑定到父组件元素来使其工作。

这就像一种魅力。 :)

共享服务

import {Injectable} from '@angular/core';

@Injectable()
export class SharedService {

    data: any;          // you can create your own class but here just to understand data

    setHeading(newValue) {
        this.data.heading = newValue;
    }
}

AppComponent.ts

import {SharedService} from './SharedService';

@Component({
    selector: 'app',
    providers: [SharedService],
    template: `
        <div class="heading">{{sharedData.heading}}</div>
        <router-outlet></router-outlet>
    `
})
@Routes([
    {path: '/comp1', component: Comp1Component},
    {path: '/comp2', component: Comp2Component}
])
export class AppComponent {

    constructor(private sharedService: SharedService) { }

    sharedData = this.sharedService.data;
}

Comp1Component.ts

import {SharedService} from './SharedService';

@Component({
    selector: 'comp1'       // you dont need to set providers for service, it will consume one from parent component
})
export class Comp1Component {
    constructor(sharedService: SharedService) { 
        sharedService.setHeading('Component 1');
    }
}

Comp2Component.ts

import {SharedService} from './SharedService';

@Component({
    selector: 'comp2'      // you dont need to set providers for service, it will consume one from parent component
})
export class Comp2Component {
    constructor(sharedService: SharedService) { 
        sharedService.setHeading('Component 2');
    }
}