Question

我是Angular的初学者，我尝试做一些运动。我有2个组件，一个用于获取文本，另一个用于显示此文本。我有服务，当我使用按钮触发功能来改变文本时，一切正常。我想要做的是更改文本而不点击按钮或其他任何东西。我已经知道我不能使用ngOnChange，因为它不起作用。

组件1 ts

mytext: string;

constructor(private data: MyService) {}

ngOnInit() {
    this.data.currentMytext.subscribe(mytext => this.mytext = mytext);
}

changeMytext(): void {
    this.data.changeMytext(this.mytext);
}

组件1 html

<form>
<button (click)="changeMytext()">Start</button>
<input [(ngModel)]="mytext" type="text" name="mytext">
</form>

组件2 ts

mytext: string;

constructor(private data: MyService) {}

ngOnInit() {
    this.data.currentMytext.subscribe(mytext => this.mytext = mytext);
}

组件2 html

<p>{{mytext}}</p>

服务

private mytextSource = new Subject<string>();

currentMytext = this.mytextSource.asObservable();

constructor() { }

changeMytext(mytext: string)
{
    this.mytextSource.next(mytext);
}

Answer 1

您可以使用getter / setters而不是像这样的主题：

组件1

get mytext(): string {
   return this.data.currentMyText;
};

set myText(value: string) {
   this.data.currentMyText = value;
}

constructor(private data: MyService) {}

模板1

<form>
<input [(ngModel)]="mytext" type="text" name="mytext">
</form>

组件2

// This component only needs a getter
// since it is only displaying the value
get mytext(): string {
   return this.data.currentMyText;
};

constructor(private data: MyService) {}

模板2

<p>{{mytext}}</p>

<强>服务

currentMytext: string;

constructor() { }

注意：我没有语法检查此代码。这一切都写在这里，而不是编辑。

Answer 2

因为我的代码已经有了这么多代码，所以你不需要这里的主题＆＃34;回答，我将在第二个答案中提供主题技巧。

你可以使用带有这样的主题的getter / setter：