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 的 heading 属性？

谁能建议我使用 Angular2 RC 1 可行吗？以及如何实现？

Answer 1

您安全的选择是使用服务：

DataService.ts

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

以上建议的方法对我不起作用，但我使用服务内部的模型并将模型属性绑定到父组件元素使其工作。

这很有效。 :)

SharedService.ts

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');
    }
}

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

Angular 2 RC1 - Updating parent component property from child route component property

angular2-routing

angular

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

Angular 2 RC1 - Updating parent component property from child route component property

angular2-routing

angular

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