将AngularJS数组传递给降级的Angular 7组件

Question

I am working on converting an AngularJS application to Angular. I am currently running a hybrid solution with most of the components still being AngularJS components, and am slowly rewriting components to Typescript. I am trying to downgrade an Angular component to be used in an AngularJS template, and the component takes in an @Input of a list.

The input declaration in the Angular controller

 @Input() inputName: any;

In the AngularJS template:

The @Input for this will be the string '$ctrl.list'

<downgraded-component input-name="$ctrl.list"></downgraded-component>

The @Input for this will be an empty string

<downgraded-component input-name="{{$ctrl.list}}"></downgraded-component>

How can I pass a list from an AngularJS component/template to an Angular 7 component/template?

Answer 1

You need to include brackets [] when passing data that comes from an expression to your angular component, like this;

<downgraded-component [input-name]="$ctrl.list"></downgraded-component>

When using downgraded components you use a strange mix of new and old syntax - the kebab case comes from angularjs and the brackets from angular.