angularjs – 将数据传递到Angular1应用程序中降级的Angular2组
发布时间:2020-12-17 17:58:54 所属栏目:安全 来源:网络整理
导读:我对Angular很新,所以如果这是一个明显的问题,请原谅我. 经过大量的试验和错误,我设法让我的新Angular2组件正确降级,以便它可以在我的Angular1.4应用程序中运行.该组件主要起作用.唯一的问题 – 它是一个很大的问题 – 该组件忽略了我在模板级别提供的所有输
我对Angular很新,所以如果这是一个明显的问题,请原谅我.
经过大量的试验和错误,我设法让我的新Angular2组件正确降级,以便它可以在我的Angular1.4应用程序中运行.该组件主要起作用.唯一的问题 – 它是一个很大的问题 – 该组件忽略了我在模板级别提供的所有输入. 我认为问题是我传递它们的方式.我想我可能会意外地使用Angular2方式传递它们而不是Angular1,但是我无法验证它.我所知道的是,当我从ngOnInit()中检查我的@input()变量的值时,它们显示为未定义,即使我通过模板传递硬值. (对不起这里的格式,代码似乎不会呈现为文本否则) > <breadcrumb <!-- These two inputs are coming in as 'undefined'??--> > [options]="[ > {name: 'Option 1',disabled: false},> {name: 'Option 2',> {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'] })); 希望别人觉得这很有用. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |