Question

我有两个班级，Secure和Client。我的Secure班级是Client的父级。

这个想法是当一个类扩展Secure时，如果用户未经过身份验证，构造函数会检查身份验证并重定向到登录页面。该课程如下：

export class Secure {

    protected user: User;

    constructor(public router: Router, public userHandler: UserHandler) {
        userHandler.checkAuthentication(this);
    }

    isLoggedIn(message: string, isLoggedIn: boolean) {
        if(!isLoggedIn){
            this.router.navigate(['/']);
        }
    }

    getUser(): User{
        return this.user;
    }
}

我的孩子班看起来像这样：

export class ClientsComponent extends Secure{

  client: Client = new Client();

  clients: Array<Client>;

  constructor(public router: Router, public userHandler: UserHandler, public clientService: ClientService) {
      super(router, userHandler);

  }

  ngOnInit() {
    this.clientService.getAllUsers(this);
  }

  doRegister(){
      this.clientService.createNewClient(this.client.email, this);
  }

  callbackRegisterComplete(){
    this.clientService.getAllUsers(this);
  }

  callbackWithClients(clients:Array<Client>){
    this.clients = clients;
  }

}

在我的Clients模板中，我想检查Secure课程中的用户是否有某个角色：

<tr *ngFor="let client of clients; let i = index">
    <th scope="row">{{i+1}}</th>
    <td>{{client.email}}</td>
    <td>{{client.userStatus}}</td>
    <td *ngIf="user.isAdmin">...</td>
</tr>

但是这会产生以下错误：无法读取未定义的属性'isAdmin'

所以我的问题是：有没有办法从子类模板访问父类中的变量？如果没有，有什么好方法可以解决这个问题吗？

Answer 1

不使用扩展，只需使用@Input()将数据从父组件传递到子组件：

parent模板：

<child [someData]="data"></child>

这是跨组件共享数据的最有效方式。

现在在child，如果您希望从模板中获取数据，则可以通过this.someData或someData获取数据。

Answer 2

如果您的子组件仅与其父组件严格相关，则可以使用继承。

只需从父级扩展，您就可以拥有父级组件中的所有内容。

@Component({
  selector: 'task',
  template: `<task-body></task-body>`,
})
export class TaskComponent{
   taskType:any;
}

@Component({
  selector: 'task-body',
  template: `Here you can see variable from parent {{taskType}}`,
})
export class TaskBodyComponent extends TaskComponent{
   //also you can use parent variable in your child component as that 
    variable would exist on your child
   logSomething(){
      console.log(this.taskType);
   }
}

从子组件模板访问父变量

2 个答案: