javascript - Angular 不会分配另一个属性值

Question

最近我开始学习 Angular，但今天遇到了一个问题。我有以下组件:

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../home/shared.service';
import { IData } from '../data/IData';

@Component({
  selector: 'app-current-article',
  templateUrl: './current-article.component.html',
  styleUrls: ['./current-article.component.css']
})
export class CurrentArticleComponent implements OnInit {

  data: IData;
  symbols: number = 150;
  showReadMore = true;
  contentToShow: string = "";

  constructor(private _sharedService: SharedService) { }

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

  readMore() {
    //this.symbols += 100;
  }
}

“data”属性是一个具有以下属性的对象:标题(字符串)、authorId(数字)和内容(字符串)。

我也按照this post的解决方案进行操作并提供了这项服务:

import { Injectable } from '@angular/core';
import { IData } from '../data/IData';

@Injectable()
export class SharedService{

    sharedData: IData = {
        title: "",
        authorID: 0,
        content: ""
    };

    insertData(data: IData){
        this.sharedData.title = data.title;
        this.sharedData.authorID = data.authorID;
        this.sharedData.content = data.content;
    }
}

我也有组件的 View :

<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>

我的问题来了。 “contentToShow”属性似乎未定义，我觉得这很奇怪......但是，如果我尝试使用“data.content”，它工作得很好并显示我的数据。怎么了？我花了 2 个小时试图解决它，我开始认为这一定是非常明显的事情，但我不知道是什么......谢谢!

Answer 1

当您将 data.content 的值分配给 contentToShow 时，该属性尚未设置，因此 contentToShow 似乎没有被设置放。您需要知道 Javascript 使用“按引用调用”，但它仅适用于数组或对象，而不适用于基元(如字符串、数字等)。

因此，当您使用 data.content 时，您会看到一些值(value)。因为您直接从对象访问属性，并且更改后的值显示在 html 中。

为了更好地理解这篇文章Is JavaScript a pass-by-reference or pass-by-value language?可以提供帮助。

解决问题的两种方法可以是:您可以使用 data.content 或者您可以通知您的组件值已更改，例如通过使用 Observable。

最后一个看起来像这样:

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