@Input получает имя переменной из AngularJS - PullRequest
Новая
       12

@Input получает имя переменной из AngularJS

0 голосов
/ 04 января 2019

Я пытаюсь перенести приложение AngularJS в Angular.

У меня есть некоторые компоненты с привязками, которые необходимо преобразовать в Angular

Код AngularJS: 

<my-comp test="test.data" otherData="test.otherData"><my-comp>

my-comp.ts: 

export default {
    template: html,
    bindings: {
        test: '<',
        otherData: '=',
    },
}

мой-comp.html: 

<div ng-repeat="val in $ctrl.test">
    {{ val }}
</div>

Выход: 1 2 3

Теперь я перенес my-comp.ts из AngularJS в Angular

мой-comp.ts: 

export class MyCompComponent implements OnInit {
    @Input() test: any;
    @Input() otherData: any;
    ngOnInit() {
        console.log('test: ', this.test);  // prints "test.data"
        console.log('otherData: ', this.otherData); // prints "test.otherData"
    }
}

мой-comp.html: 

{{ test }}

Фактическая выработка: "Test.data"

Ожидаемый результат: 1 2 3

Я использую @Input для привязок с '=' и '<' </p>

Я понижаю версию обновленного компонента, чтобы его можно было использовать в коде AngularJS в 

<my-comp test="test.data" otherData="test.otherData"><my-comp>

без необходимости записывать его как 

<my-comp [test]="test.data" [otherData]="test.otherData"><my-comp>

Обновление:

Docs

Используя NgUpgrade, мы можем использовать угловой компонент (downgrade) в шаблоне AngularJS и передавать входные данные с [] как обычные угловые входные данные 

<my-comp [test]="test.data" [otherData]="test.otherData"><my-comp>

1 Ответ

0 голосов
/ 04 января 2019

Вы должны включить свой компонент, как это, используя квадратные скобки. См. Связывание свойств . 

<my-comp [test]="test.data" [otherData]="test.otherData"></my-comp>
...