如何以角度将数据从视图传递到布局

Question

我是角度框架的新手。我正在使用 angular 8。

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

下面是路线：

这是我的布局

这是我的标题

这是我的看法

Answer 1

您有几个选项可以解决此 AFAIK：

• 由于所有内容都在 app 组件下，您可以将该组件作为标题标题的传递（两者都可以从 app 组件中获取值）
• 您可以拥有将标头本身与其他组件连接起来的服务

我认为第二种解决方案更好，因为它遵循正常的 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都更新标头本身。所以我们需要提供服务（它应该是应用程序级别的单例）并在标题视图初始化后订阅主题：

标题组件

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

然后，您需要做的就是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来展示这一点。

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