2

即使在使用@ViewChild 导入后，我也无法访问组件的属性。下面是代码。

header.monitor.component.ts

import { AdminComponent } from 'admin/admin.component';
import { Component } from '@angular/core';
import { ViewChild, AfterViewInit } from '@angular/core';

@Component({
    selector: 'monitor-header',
    templateUrl: './header.monitor.component.html',
    styleUrls: ['./header.monitor.component.css']
})

export class HeaderMonitorComponent implements AfterViewInit {

    @ViewChild(AdminComponent) private admin: AdminComponent;

    private monitorTitle: string;

    ngAfterViewInit() {
        this.monitorTitle = this.admin.title;
    }
 }

header.monitor.component.html

<div class="text-center header h3">{{monitorTitle}}</div>

admin.component.ts

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

@Component({
  selector: 'monitor-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent {

  constructor() { }

  title = 'Header';

}

错误错误：未捕获（承诺）：类型错误：无法读取未定义的属性“标题”类型错误：无法读取未定义的属性“标题”

帮我解决这个错误。

4

1 回答 1

8

您应该检查@ViewChildinAfterViewChecked而不是AfterViewInit. 您也可以@angular/core像这样捆绑您的导入： import { Component, ViewChild, AfterViewInit } from '@angular/core';. 然后，而不是实施AfterViewInit只是实施AfterViewChecked。

这是它的外观：

import { AdminComponent } from 'admin/admin.component';
import { Component, ViewChild, AfterViewChecked } from '@angular/core';

@Component({
    selector: 'monitor-header',
    templateUrl: './header.monitor.component.html',
    styleUrls: ['./header.monitor.component.css']
})

export class HeaderMonitorComponent implements AfterViewChecked {

    @ViewChild(AdminComponent) private admin: AdminComponent;

    private monitorTitle: string;

    ngAfterViewChecked() {
        this.monitorTitle = this.admin.title;
    }
 }

一个问题：这些都是父组件还是其中一个组件是另一个组件的子组件？我问的原因是您可能想要研究在组件之间传递该变量的不同方法，因为这可以通过@Input或使用服务来存储和设置标头变量来实现。我希望这能有所帮助。

编辑：

要回答您的评论，您应该创建如下服务：

import { Injectable } from '@angular/core';

@Injectable()
export class HeaderService {

  _title: string;

  constructor() { }

  set title(title) {
    this._title = title;
  }
  get title() {
    return this._title;
  }

}

然后在您的组件中导入服务和get/或set变量：

import { AdminComponent } from 'admin/admin.component';
import { Component, ViewChild, AfterViewChecked } from '@angular/core';
import { HeaderService } from 'path/to/your/service';

@Component({
    selector: 'monitor-header',
    templateUrl: './header.monitor.component.html',
    styleUrls: ['./header.monitor.component.css']
})

export class HeaderMonitorComponent implements AfterViewChecked {

    @ViewChild(AdminComponent) private admin: AdminComponent;

    private monitorTitle: string;

    constructor(private headerService: HeaderService) {} // Import service here


    ngAfterViewChecked() {
        this.monitorTitle = this.headerService.title;
    }
 }

您只需要确保使用其中一个组件设置标题this.headerService.title = 'yourTitle';

我只是不确定首先加载哪个组件。

您应该在此处查看 Angular 服务：https ://angular.io/tutorial/toh-pt4

还可以在这里查看 Angular 组件交互：https ://angular.io/guide/component-interaction

编辑＃2：

这是在您的服务中订阅该标题的另一种方式：

所以在下面我创建了一个Subject字符串类型的字符串，一个告诉它的方法是下一个要保存和发送的字符串。

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class HeaderService {

  public titleSubject: Subject<string> = new Subject<string>();

  constructor() { }

  setNextTitle(title) {
    this.titleSubject.next();
  }

}

然后在你的HeaderMonitorComponent你会想要Subject像这样订阅：

import { AdminComponent } from 'admin/admin.component';
import { Component, OnInit ViewChild, AfterViewChecked } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HeaderService } from 'path/to/your/service';

@Component({
    selector: 'monitor-header',
    templateUrl: './header.monitor.component.html',
    styleUrls: ['./header.monitor.component.css']
})

export class HeaderMonitorComponent implements OnInit, AfterViewChecked {

    @ViewChild(AdminComponent) private admin: AdminComponent;

    private monitorTitle: string;
    titleObservable: Observable<string>;

    constructor(private headerService: HeaderService) {} // Import service here

    ngOnInit() {

       this.titleObservable = this.headerService.titleSubject.asObservable();
       this.titleObservable.subscribe((title) => {
          this.monitorTitle = title;
       });
    }

    ngAfterViewChecked() {
        this.monitorTitle = this.headerService.title;
    }
 }

然后在您的 中AdminComponent，每当单击按钮时，调用this.headerService.setNextTitle(title)并且您在 HeaderMonitorComponent 中订阅的新标题将被确认并替换 的当前值monitorTitle。

处理通过的数据的另一种快速方法。

于 2017-11-29T19:31:38.530 回答