Question

我有main app.component.ts，从这里我将currentstatus变量传递给navbar.component.ts的chid组件（Navbar Component），并使用@input（）将值传递给Navbar组件。装饰器，但我遇到问题如何将输入装饰器的此值传递给navbar.component.html？

我的主要app.component.ts是

export class AppComponent {

      public currentstatus: any;

      constructor(private authService:LoginAuthService,private router:Router){
           this.currentstatus=this.authService.getStatus().
           subscribe(currentstatus => {
            this.currentstatus=currentstatus;
           })
      }

      logout(){
        localStorage.removeItem('currentUser');
        this.router.navigate(['login']);
      }

我从这里传递当前状态

我的app.component.html是

<div id = "wrapper">
    <div class="main-page">
<app-navbar [currentstatus]="currentstatus" ></app-navbar>

<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
</div>

在这里，我已将currentstatus传递给navbar.component.ts

export class NavbarComponent implements OnInit {

    @Input() currentstatus:any;


   constructor(){

  }
  ngOnInit() {
  }

  logout(){

  }
}

现在如何将当前状态传递给navbar.component.html ???

Answer 1

您的错误是您正在做类似abc = service.get().subscribe(result => abc = result;})

的操作

（您正在尝试将currentstatus 两者设置为整个订阅，并且设置为订阅的结果）

只需像这样使用您的服务即可：

将请求的结果分配给currentstatus

可能性1：

AppComponent：

this.authService.getStatus().subscribe(
    result =>  { this.currentstatus = result; });

可能性2：

或者您可以使用Angular的async管道为您进行订阅，在这种情况下，父应用程序中的currentstatus应该是整个Observable（没有订阅），这将类似于：

AppComponent.ts：

// assign the Observable to your variable currentstatus
this.currentstatus = this.authService.getStatus();

AppComponent.html：

<app-navbar [currentstatus]="currentstatus | async"></navbar>

注意：

对两种情况都进行说明：通常，通常最好的做法是在ngOnInit函数而不是构造函数中执行服务调用。

如何将@Input（）装饰器值传递到其html文件？

1 个答案: