javascript - How does angular2 bind input attributes to the component tags that need to be routed to after <route-outlet></route-outlet> takes up space?

Question

Solution, as described in the question,
I want to pass data to a component, but this component is displayed at the location of <route-outlet></route-outlet> and [XX] cannot be added directly to the routeroutlet label. = "XX"，

Looking at the documentation, it seems that class and attr can be bound through the host field annotated by @conponent.
But when I bind [input value], an error will be reported,

@Component({
  selector: 'app-onlinecourse',
  templateUrl: './onlinecourse.component.html',
  host:{
    class:"test",
    '[test]':"test"
  }
......

  @Input()
  test;
.....
 ngOnChanges() {
      console.log(this.test);
  }
//undifind

Error message:
Can't bind to 'test' since it isn't a known property of 'app-onlinecourse'.

请输入代码

Thanks

Answer 1

angular’s ​​host follows the binding rules of template syntax, please refer to (Template Syntax) [https://angular.io/docs/ts/la...

So, your host should probably look like this:

host: {
    '[class.special]': 'test',
    '[attr.aria-label]': 'true'
}