[英]Passing data into a downgraded Angular2 component within an Angular1 Application
I am pretty new to Angular, so please forgive me if this is an obvious question. 我对Angular很新,所以如果这是一个明显的问题,请原谅我。
With a lot of trial and error, I managed to get my new Angular2 component downgraded properly so that it works within my Angular1.4 application. 经过大量的试验和错误,我设法让我的新Angular2组件正确降级,以便它可以在我的Angular1.4应用程序中运行。 And the component mostly works. 该组件主要起作用。 The only problem - and it's a big one - is that the component ignores all inputs that I give it at the template-level. 唯一的问题 - 它是一个很大的问题 - 该组件忽略了我在模板级别提供的所有输入。
I think the issue is the way I'm passing them in. I think I may be accidentally using an Angular2 way of passing them in instead of Angular1, but I'm having trouble verifying that. 我认为问题是我传递它们的方式。我想我可能会意外地使用Angular2方式传递它们而不是Angular1,但是我无法验证它。 All I know is that when I check the value of my @input() variables from within ngOnInit() they are showing up as undefined, even though I am passing in hard values through the template. 我所知道的是,当我从ngOnInit()中检查我的@input()变量的值时,它们显示为未定义,即使我通过模板传递硬值。
(Sorry about the formatting here, the code won't seem to render as text otherwise) Breadcrumb.html (within Angular1 application): (抱歉这里的格式化,代码似乎不会呈现为文本) 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 (within Angular2 component "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: 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>
If anyone has any suggestions for how I can make my Angular2 component see the data I am sending into it, I would really really appreciate it! 如果有人对我如何使我的Angular2组件看到我发送到它的数据有任何建议,我真的很感激它! Thank you! 谢谢!
I found what the problem was. 我发现了问题所在。 I had forgotten to include the inputs and outputs as properties within the downgradeComponent function argument object, like so: 我忘了将输入和输出作为属性包含在downgradeComponent函数参数对象中,如下所示:
index.ts of ng2Components folder index.ts的ng2Components文件夹
angular
.module('example', [])
.directive(
'breadcrumb',
downgradeComponent({
component: BreadcrumbComponent,
inputs: ['options', 'selectedIndex'], //required!
outputs: ['selectionMade']
}));
Hope someone else finds this useful. 希望别人觉得这很有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.