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

在标题模板中,我试图访问用户

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

但是用户字段没有得到解决.如何从子类访问超类的字段？

Answer 1

您收到错误,因为该user对象在加载时不可用.

无论是初始化还是使用?.模板中的安全导航操作符()

initalise:

public user: User = new User();

安全导航:

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