Angular：在组件外部设置组件属性

Question

我有一个Angular页面，它使用一个组件来显示它的一些属性。但是组件中的属性不会显示在页面上。这是代码：

HTML页面（testPage.component.html）

<p>title: {{title}}</p>
<p>another title: {{anotherTitle}}</p>

TypeScript（testPage.component.ts）

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-testPage',
  templateUrl: './testPage.component.html',
  styleUrls: ['./testPage.component.css']
})
export class TestPageComponent implements OnInit {
  title: string;
  anotherTitle = "This is another title";

  setTitle(): void {
    this.title = "This is title!!";
    console.log('This is title', this.title);
  }
}

var testPageComponent = new TestPageComponent();
//newBudgetComponent.title = "some title here!!"; //Also not working
testPageComponent.setTitle();

在页面中，anotherTitle填充得很好，但title没有填充。

函数setTitle记录标题，但Angular页面不显示值。

以下是页面的外观：

如何在组件外部设置组件属性？

Answer 1

你想设置页面标题吗？如果是，那么使用标题服务

import { Title } from '@angular/platform-browser';

constructor(private titleService: Title)

this.titleService.setTitle("Title");

否则，使用具有行为主题的共享服务，除非它是子组件，然后使用输入

Answer 2

有几种方法可以实现这一目标。首先，Angular中组件的交互以及它们在页面上的显示方式与您尝试显示示例的示例相比，不那么简单。请参阅this link以了解有关Angular中组件生命周期的更多信息。

至于在组件上设置属性的值，这里有几个例子。请记住，其中一些可能需要调整，因为我没有在IDE中编写/运行代码。

• Default Value

你的例子已经做到了。创建组件时，已设置该字段的默认值。 title = 'My Title'

• Input Decorator

使用@Input()装饰您的属性允许您将数据从父组件传递到子组件。 <my-child-component [title]='value-or-variable'></my-child-component>

• ViewChild Decorator和ViewChildren Decorator

使用@ViewChild()装饰器装饰“组件”属性（在本例中为父组件中的子组件）将允许父组件访问子组件并使用它的属性。请记住，指示的组件必须是父组件的子组件。 @ViewChild(MyChildComponent) child: MyChildComponent;然后在父组件的init循环完成后this.child.title = 'My Title';

• ContentChild Decorator和ContentChildren Decorator

使用@ContentChild()装饰器装饰“组件”属性（在本例中为父组件或任何后代中的子组件）将允许父组件访问后代组件并使用其后代和属性。请记住，指示的组件可以是此父级的任何后代组件。 @ContentChild(MyDescendentComponent) descendent: MyDescendentComponent;然后在init周期完成this.descendent.title = 'My Title';

• Services，tokens和values的依赖注入

提供的对象可以注入组件，并在ngOnInit方法中理想地设置组件的值。提供者可以设置在几个不同的级别，包括（但不限于）组件模块。 This link在依赖注入方面更加深入，尽管它稍微老一些。

class MyComponent {
  constructor(myService: MyService) {}
}

//module
providers: [
  MyTitleToken,
],

//component
class MyComponent {
  constructor(public title: MyTitleToken) {}
}

//module
providers: [
  {provide: 'MyTitle', useValue: 'Hello Title'},
],

//component
class MyComponent {
  constructor(@Inject('MyTitle') title: string) {}
}