Question

我正在使用Angular2 rc5，我尝试通过服务构建组件通信。对于数组，它的工作方式与预期的一样，但如果我更改了一个字符串，则不会更新。

我的主要组件如下：

import {Component} from '@angular/core';
import {ShareServiceService} from "../share-service.service";
import {ChildTwoComponent} from "../child-two/child-two.component";
import {ChildOneComponent} from "../child-one/child-one.component";

@Component({
    selector: 'parent',
    template: `
        <h1>Parent</h1>
        <div>
            <child-one></child-one>
            <child-two></child-two>
        </div>
    `,
    providers: [ShareServiceService],
    directives: [ChildOneComponent, ChildTwoComponent]
})
export class ParentComponent {
    constructor() {}
}

我的第一个孩子组成部分：

import {Component} from '@angular/core';
import {ShareServiceService} from "../share-service.service";

@Component({
    selector: 'child-one',
    template: `
        <div style="float:right; width: 45%">
            <pre>title: {{title}}</pre>
            <pre>title: {{_sharedService.testTitle}}</pre>
            <div>
            <ul *ngFor="let dataElement of data">
                <li>{{dataElement}}</li>
            </ul>
            </div>
        </div>
        `
    })
export class ChildOneComponent{
    data:string[] = [];
    title:string;

    constructor(public _sharedService:ShareServiceService) {
        this.data = this._sharedService.dataArray;
        this.title = this._sharedService.testTitle;
    }
}

第二个子组件：

import {Component} from '@angular/core';
import {ShareServiceService} from "../share-service.service";

@Component({
    selector: 'child-two',
    template: `
        <div style="float:left; width: 45%">
            <pre>title: {{title}}</pre>
            <pre>titleObj: {{titleObj.title}}</pre>
            <div>
                <ul *ngFor="let dataElement of data">
                    <li>{{dataElement}}</li>
                </ul>
            </div>
        <input type="text" [(ngModel)]="dataInput"/>
        <button (click)="addData()">addData</button>
        <button (click)="updateTitle()">updateTitle</button>
        </div>
        `
})
export class ChildTwoComponent {
    dataInput:string = 'Testing data';
    data:string[] = [];
    title:string;

    constructor(public _sharedService:ShareServiceService) {
        this.data = this._sharedService.dataArray;
        this.title = this._sharedService.testTitle;
    }

    addData() {
        this._sharedService.insertData(this.dataInput);
        this.dataInput = '';
    }

    updateTitle() {
        this._sharedService.updateTestTitle(this.dataInput);
        this.dataInput = '';
    }
}

我的服务：

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

@Injectable()
export class ShareServiceService {
    dataArray:string[] = [];
    testTitle:string = "should be updated";

    insertData(data:string) {
        this.dataArray.push(data);
    }

    updateTestTitle(newTitle:string) {
        this.testTitle = {title: newTitle};
    }
}

我试图实现的是，如果我在输入字段中输入带有“”的绑定的内容并按下“updateTitle”，则更新两个组件中的标题。但那目前还不行。

如果我将我的输入值添加到数组中，通过单击“adddata”按钮，所有工作如excepted和我的数据元素列表显示所有元素。

有人知道为什么我不能更新字符串吗？

提前致谢！

Answer 1

如果复制对象或数组，则复制引用。两者（源和目标）都指向同一个对象。如果一方修改了对象，则另一方看到修改。

如果复制原始值（字符串，数字，布尔值），则目标将获取值的副本，而源和目标不会以任何方式相关。

   // copies a reference
   this.data = this._sharedService.dataArray;
   // copies the value
   this.title = this._sharedService.testTitle;

您可能需要的是一个observable，它会在共享服务中的属性被修改时发出事件。

有关详细信息，请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

两个组件之间的Angular2通信

1 个答案: