Javascript r解决方案，但OP代码的问题在于： this.contentToShow = this.data.content;

不起作用，因为它不引用对象

数据

，如上例所示

this.contentToShow

是一个

字符串

，每次数据被

\u sharedService

更改时，它都不知道这些更改，不像像这样使用

this.data=this.\u sharedService.sharedData

。现在

this.data

和

this.\u sharedService.sharedData

都指向同一个对象

但是，如果我尝试使用“data.content”，它会正常工作并显示我的数据

它之所以有效，是因为组件使用了对同一对象的引用，并在发生更改时得到更新

因此，解决方案是在component.ts和模板中使用

this.data

：

// component
ngOnInit() {
  this.data = this._sharedService.sharedData;
}


// template
<div *ngIf="data.title">
<h1>{{ data.title }}</h1>
<h5>Author ID: {{ data.authorID }}</h5>
<div>
    <span>{{ data.content }} </span>
    <span>
        <a href="#" *ngIf="showReadMore" (click)="readMore()">Read More &#8618;</a>
    </span>
  </div>
</div>

//组件
恩戈尼尼特（）{
this.data=this.\u sharedService.sharedData；
}
//模板
{{data.title}}
作者ID:{data.authorID}
{{data.content}

在ngOnInit中，如果您使用console.log（this.\u sharedService.sharedData）；，您会得到什么？？你的“共享数据”里有什么？“共享数据”应该保存我的数据。如果我是console.log（this.\u sharedService.sharedData）；在ngOnInit中，它用我的属性记录对象，但它们是空的…负责获取数据的是http请求，调用的函数是什么，如果你能在中编辑它会有帮助，你需要先运行它。只需编辑它。在ngOnInit中，如果你控制台.log（this.u sharedService.sharedData）；？，你会得到什么？？你的“共享数据”里有什么？“共享数据”应该保存我的数据。如果我是console.log（this.\u sharedService.sharedData）；在ngOnInit中，它用我的属性记录对象，但它们是空的…负责获取数据的是http请求，调用的函数是什么，如果你能在中编辑它会有所帮助，你需要先运行它。只是编辑了它。非常感谢你的回复，但似乎以下代码并不能解决我的问题。。。您是否可能遗漏了什么内容？“服务本质上是异步的！”-有点奇怪。更具体的http调用本质上是异步的，其中服务等待从后端获取数据。我更正了我的答案。你所犯的错误，都是同样的错误。尝试初始设置数据，我没有收到任何错误。如果我试图在视图中使用“data.content”，它会被激活，但如果我创建了一个新属性->this.contentToShow=this.data.content；尝试在视图中使用它，没有显示任何内容…非常感谢您的回复，但是下面的代码似乎无法解决我的问题。。。您是否可能遗漏了什么内容？“服务本质上是异步的！”-有点奇怪。更具体的http调用本质上是异步的，其中服务等待从后端获取数据。我更正了我的答案。你所犯的错误，都是同样的错误。尝试初始设置数据，我没有收到任何错误。如果我试图在视图中使用“data.content”，它会被激活，但如果我创建了一个新属性->this.contentToShow=this.data.content；试着在视图中使用它，什么都看不出来…谢谢你的回答！那我怎么才能“复制”呢？我需要做的是对“contentToShow”进行一些操作，并且仍然保存原始值。我该怎么做？再次感谢！谢谢你的回答！那我怎么才能“复制”呢？我需要做的是对“contentToShow”进行一些操作，并且仍然保存原始值。我该怎么做？再次感谢！非常感谢你的解释！但是“等待属性设置”是什么意思？我想这解决了我的问题。现在，我必须阅读一些文档来准确地理解它是如何工作的。非常感谢：）非常感谢你的解释！但是“等待属性设置”是什么意思？我想这解决了我的问题。现在，我必须阅读一些文档来准确地理解它是如何工作的。非常感谢：）

<div *ngIf="data.title">
    <h1>{{ data.title }}</h1>
    <h5>Author ID: {{ data.authorID }}</h5>
    <div>
        <span>{{ contentToShow }} </span>
        <span>
            <a href="#" *ngIf="showReadMore" (click)="readMore()">Read More &#8618;</a>
        </span>
    </div>
</div>

 data: IData = { content: '' };

ngOnInit() {
    this.data = this._sharedService.sharedData;
    this.contentToShow = this.data && this.data.content || '';
}

@Injectable()
export class SharedService{
    notfiySubject: Subject< IData > = new Subject();

    ...
    insertData(data: IData){
        this.sharedData.title = data.title;
        this.sharedData.authorID = data.authorID;
        this.sharedData.content = data.content;
        // Emits the subject
        this.notifySubject.next(this.sharedData);
    }
}

this._sharedService.notifySubject.subscribe(data => {
    // Here you can set `contentToShow` with data or _sharedServices.sharedData
});

<span>{{ contentToShow }} </span>

<span>{{ data.content }} </span>

dataChanged = new Subject<any>();

    this.sharedData.content = data.content;
    this.dataChanged.next(); // <-- this will send the notification
}

this._sharedService.dataChanged.subscribe(() => {
  this.contentToShow = '??? ' + this.sharedService.sharedData.content + ' ???';
})

this.contentToShow = this.data.content;

// component
ngOnInit() {
  this.data = this._sharedService.sharedData;
}


// template
<div *ngIf="data.title">
<h1>{{ data.title }}</h1>
<h5>Author ID: {{ data.authorID }}</h5>
<div>
    <span>{{ data.content }} </span>
    <span>
        <a href="#" *ngIf="showReadMore" (click)="readMore()">Read More &#8618;</a>
    </span>
  </div>
</div>