从 Angular 5 组件访问超类字段

Question

我有一个包含组件通用功能的超类。

export class AbstractComponent implements OnInit {

  public user: User;

  constructor(public http: HttpClient) {
  }

  ngOnInit(): void {
    this.http.get<User>('url').subscribe(user => {
      this.user = user;
    });
  }
}

我有一个实现这个超类的子类。

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent extends AbstractComponent {

  constructor(public http: HttpClient) {
    super(http);
  }
}

在 headers 模板中，我正在尝试访问用户

<mat-toolbar color="primary">
  <span *ngIf="user">Welcome {{user.username}}!</span>
</mat-toolbar>

但是用户字段没有解析。如何从子类访问超类的字段？

Answer 1

您收到错误消息，因为 user 对象在加载时不可用。

在模板中初始化它或使用安全导航运算符 (?.)

初始化：

public user: User = new User();

安全导航：

<span>Welcome {{user?.username}}!</span>

Answer 2

这种方法有效，但不是一个好的做法。在这种情况下，最好使用 async pipe:

export class AbstractComponent {
  user$;
  constructor() {
    // your real http request should be here
    this.user$ = Observable.of({name: 'John Doe'});
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>Hello {{(user$ | async).name}}</div>
  `,
})
export class App extends AbstractComponent {
  constructor() {
    super();
  }
}

从 Angular 5 组件访问超类字段

Access Superclass Fields from Angular 5 Component

javascript

inheritance

angular

angular5