[英]Passing data into a downgraded Angular2 component within an Angular1 Application
我对Angular很新,所以如果这是一个明显的问题,请原谅我。
经过大量的试验和错误,我设法让我的新Angular2组件正确降级,以便它可以在我的Angular1.4应用程序中运行。 该组件主要起作用。 唯一的问题 - 它是一个很大的问题 - 该组件忽略了我在模板级别提供的所有输入。
我认为问题是我传递它们的方式。我想我可能会意外地使用Angular2方式传递它们而不是Angular1,但是我无法验证它。 我所知道的是,当我从ngOnInit()中检查我的@input()变量的值时,它们显示为未定义,即使我通过模板传递硬值。
(抱歉这里的格式化,代码似乎不会呈现为文本) Breadcrumb.html(在Angular1应用程序中):
> <breadcrumb <!-- These two inputs are coming in as 'undefined'??-->
> [options]="[
> {name: 'Option 1', disabled: false},
> {name: 'Option 2', disabled: false},
> {name: 'Option 3', disabled: true}
> ]"
> [selectedIndex]="0"
> (selectionMade)="logOutput($event)"
> </breadcrumb>
Breadcrumb.component.ts(在Angular2组件“breadcrumb”中):
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
@Component({
selector: 'app-breadcrumb',
template: require('./breadcrumb.component.html')
})
export class BreadcrumbComponent implements OnInit {
@Input() options : Array<any>;
@Input() selectedIndex : number;
@Output() selectionMade : any = new EventEmitter();
private selected : any;
selectOption(option: any, broadcastSelection: boolean = true) {
if(this.selected === option || option.disabled) {
return;
}
this.selected = option;
if(broadcastSelection) {
this.selectionMade.emit(this.selected);
}
}
ngOnInit() {
console.log('Inside breadcrumb ngOnInit!');
console.log(options); //<---- Showing up as undefined!
console.log(selectedIndex); //<---- Showing up as undefined!
if(this.selectedIndex !== undefined) {
this.selectOption(this.options[this.selectedIndex], false);
}
}
}
breadcrumb.component.html:
(INSIDE BREADCRUMB DIRECTIVE) <!-- This is showing up and nothing else, because none of my @input values are coming through -->
<span class="breadcrumb" *ngFor='let option of options;let last = last'>
<span
(click)="selectOption(option)"
[ngClass] = "{
'selected' : selected,
'disabled' : option.disabled
}"
>
{{option.name}}
</span>
<span *ngIf="!last">
>
</span>
</span>
如果有人对我如何使我的Angular2组件看到我发送到它的数据有任何建议,我真的很感激它! 谢谢!
我发现了问题所在。 我忘了将输入和输出作为属性包含在downgradeComponent函数参数对象中,如下所示:
index.ts的ng2Components文件夹
angular
.module('example', [])
.directive(
'breadcrumb',
downgradeComponent({
component: BreadcrumbComponent,
inputs: ['options', 'selectedIndex'], //required!
outputs: ['selectionMade']
}));
希望别人觉得这很有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.