javascript - 如何以 Angular 将数据从 View 传递到布局

Question

我是 Angular 框架的新手。我正在使用 Angular 8。

我正在使用布局来显示几页。其中标题包含在布局中，页面内容也包含在布局中。现在我想显示标题，它将由页面内容提供并显示在标题中。我该怎么做？

路线如下:

这是我的布局

这是我的页眉

这是我的观点

Answer 1

您有几种选择来解决这个 AFAIK:

• 由于所有内容都在应用程序组件下，您可以让该组件成为标题标题的传递(两者都可以从应用程序组件中获取值)
• 你可以有一个连接头部本身和其他组件的服务

我认为第二种解决方案更好，因为它遵循正常的 Angular 操作流程。

基本上，我们想要创建一个具有一个值的服务:标题字符串和一个主题，以便服务可以触发事件并让客户订阅该事件:

标题服务

@Injectable({
  providedIn: 'root',
})
export class HeaderService {
  private _title: string = 'Default Header Name';
  subject = new Subject();

  changeHeaderTitle(newTitle: string) {
    this._title = newTitle;

    this.subject.next(this._title);
  }

  clear() {
    this._title = 'Default Header Name';
    this.subject.next(this._title);
  }
}

接下来，我们希望每次更新服务的 _title 时更新 header 本身。所以我们需要提供服务(在应用程序级别应该是单例)并在标题 View 初始化后订阅主题:

标题组件

@Component({
  selector: 'kb-header',
  templateUrl: './header.component.html',
  // styleUrls: [ './app.component.css' ]
})
export class HeaderComponent implements AfterViewInit {
  name: string = 'Default header name';

  constructor(private headerService: HeaderService) {}

  ngAfterViewInit() {
    this.headerService.subject.subscribe((newTitle: string) => {
      this.name = newTitle;
    })
  }
}

然后，您需要做的就是在屏幕上注入(inject) HeaderService 并在屏幕加载后相应地更改标题标题。像这样:

屏幕组件

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements AfterViewInit {
  @Input() name: string;

  constructor(private headerService: HeaderService) {}

  ngAfterViewInit() {
    setTimeout(() => {
        this.headerService.changeHeaderTitle('pizza');
    }, 3000);
  }
}

这是一个 StackBlitz在行动中展示这一点。

添加超时只是为了模拟标题在一段时间后发生变化。你可以删除它，它应该可以正常工作。