从角度5组件访问超类字段

我有一个超类，它包含组件的常用功能。从角度5组件访问超类字段

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>

但用户字段没有被解决。我如何从一个子类访问超类的字段？

来源

2017-11-25 cscan

您确定用户获取正确吗？我使用完全相同的继承，它对我来说工作得很好。 –

试着把它放在你的子类HeaderComponent中，看它是否先工作。 – realharry

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

无论initalise或使用安全的导航操作（?.）您的模板内

initalise：

public user: User = new User();

航行安全：

<span *ngIf="user">Welcome {{user?.username}}!</span>

来源

2017-11-25 20:28:59 PierreDuc

这种方法有效，但这不是一个好习惯。在这种情况下，使用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(); 
    } 
}

来源

2017-11-25 20:43:35

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

从角度5组件访问超类字段

回答

相关问题