angular6 Can't bind to 'zzst' since it isn't a known property of

文档： https://angular.io/guide/template-syntax#event-binding

The Angular compiler may reject these bindings with errors like this one:

content_copyUncaught Error: Template parse errors:
Can't bind to 'hero' since it isn't a known property of 'app-hero-detail'

You know that HeroDetailComponent has hero and deleteRequest properties. But the Angular compiler refuses to recognize them.

The Angular compiler won't bind to properties of a different component unless they are Input or Output properties.

There's a good reason for this rule.

It's OK for a component to bind to its own properties. The component author is in complete control of those bindings.

But other components shouldn't have that kind of unrestricted access. You'd have a hard time supporting your component if anyone could bind to any of its properties. Outside components should only be able to bind to the component's public binding API.

Angular asks you to be explicit about that API. It's up to you to decide which properties are available for binding by external components.

link

You can't use the TypeScript public and private access modifiers to shape the component's public binding API.

All data bound properties must be TypeScript public properties. Angular never binds to a TypeScript privateproperty.

Angular requires some other way to identify properties that outside components are allowed to bind to. That other way is the @Input() and @Output() decorators.