从 Angular 5 组件访问超类字段答案

【问题标题】：Access Superclass Fields from Angular 5 Component从 Angular 5 组件访问超类字段
【发布时间】：2017-11-25 19:25:31
【问题描述】：

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

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>

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

【问题讨论】：

您确定用户获取正确吗？我使用完全相同的继承，它对我来说效果很好。
试着把它放到你的子类 HeaderComponent 中，先看看它是否有效。

标签： javascript angular inheritance angular5

【解决方案1】：

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

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

初始化：

public user: User = new User();

安全导航：

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

【讨论】：

对user 的访问被保护在ngIf 中——语句user.username 永远不会用未定义的user 评估，因为包含它的span 不会在DOM。
@Coderer 你是绝对正确的。更新了我的答案以反映您的评论。我不知道为什么这对他有用:)实际上我下面的答案更好，通过使用异步管道
我认为您的更新答案在某种程度上更糟。该页面将显示没有名称的Welcome，直到从后端加载用户。我建议声明 user 可能未定义，例如public user?: User，然后留下ngIf，以便span 仅在我们知道用户名之后出现。由于 AOT 编译器在 ngIf 上的类型不窄这一长期存在的问题，您可能想要离开安全导航运算符。
@Coderer 这更符合我上面的观点。然而，这取决于，如果你想要一个通用的“欢迎！”，当没有用户时:)。用例依赖。我提出的是两种不同的解决方案。属性初始化，对于用户可能没有意义。也许是默认的匿名用户，或者使用安全导航运算符。这些仍然不正确。最好是使用异步管道，这是我下面的答案

【解决方案2】：

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

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

【讨论】：

是的，你是对的，我同意这个答案，实际上在这种情况下使用异步管道是更正确的方法。 qurboni40. +