angular6 相关问题

我是 Angular 6 的新手。我在 for 循环中使用 ngComponentOutlet 我想知道如何将数据传递给我的子组件我的 HTML 我是 Angular 6 的新手。我在 for 循环中使用 ngComponentOutlet 我想知道如何将数据传递给我的子组件我的 HTML <div *ngFor="let item of items"> <ng-container *ngComponentOutlet="currentComponent"></ng-container> </div> 我的父组件决定选择哪个组件 export class MyParentComponent implements OnInit { constructor(private route: ActivatedRoute, private commonService: CommonService) { } dynamicComponents = { 'firstchild': { '1': FirstchildComponent } }; currentComponent: any; items: any; ngOnInit() { // To get data from resolver const routeResult = this.route.snapshot.data.data.result; this.items = routeResult.items; // select child component at basis of route const routeParams = this.route.snapshot.params; this.currentComponent = this.dynamicComponents[routeParams.pageName][routeParams.templateType]; } } 我的子组件 export class FirstchildComponent implements OnInit { @Input() magazineData: any[]; constructor() { } ngOnInit() { } } 所以我想将项目（循环的单个项目）传递给FirstchildComponent作为输入我该怎么做？我已经检查过注射器但是由于我是新人，我不太明白注射器是如何工作的正如您已经指出的，您需要使用注入器，它将提供所有必要的依赖数据。 ###我的父组件 @Component({...}) export class MyParentComponent { constructor(private inj: Injector) {} createInjector(item){ let injector = Injector.create([ { provide: Item, useValue: item } ], this.inj); return injector; } } ###物品类别如果没有，您将拥有 Item 的课程，然后创建具有所有属性的新课程 - @Injectable() export class Item{ ... } html <div *ngFor="let item of items"> <ng-container *ngComponentOutlet="currentComponent; injector:createInjector(item)"></ng-container> </div> ###动态组件 export class FirstchildComponent implements OnInit { @Input() magazineData: any[]; constructor() { } ngOnInit(private item : Item) { //<-- item content is here. } } 注意：代码是直接在 stackoverflow 编辑器上编写的，因此可能存在拼写错误和语法错误。请自行更正。 ViewContainerRef、ComponentFactoryResolver 在创建动态组件时比 ngComponentOutlet 更容易。动态组件模板 - <div #dynamicComponent></div> TS - @ViewChild('dynamicComponent', { read: ViewContainerRef }) podViewContainerRef; constructor(private resolver: ComponentFactoryResolver) { } ngAfterViewInit() { let componentFactory; let componentRef; try { componentFactory = this.resolver.resolveComponentFactory(pod.component); componentRef = this.podViewContainerRef.createComponent(componentFactory); componentRef.instance.podInfo = this.podInfo; } catch (e) { console.log(e); } }

angular angular6

回答 2 投票 0

Primeng 多重选择未检测到更改值

*> > > *** > > 1.我的组件： > onClose() > { this.selectedWorkCenterData.forEach(数据 =>{ > > ...

angular6 primeng

回答 2 投票 0

Angular 6 - 尝试为应用程序提供服务时未定义流程

当我尝试使用 cosmicjs 为我的 Angular 6 应用程序提供服务时，出现以下错误：未捕获的引用错误：进程未定义在 Object../node_modules/cosmicjs/dist/index.js （我...

javascript angular angular6

回答 8 投票 0

如何在角度6中使用循环选择下拉列表？

我有一个数组作为集合，我想将其加载到下拉列表中，并且我想要在某些条件下进行默认选择，但我不知道如何实现这一点。应用程序组件.ts 导入 { 组件...

angular angular6

回答 2 投票 0

将变量从.ts导入到.scss Angular

我正在开发一个角度组件，我想将 ts 文件中的变量（例如颜色）导入到我的 scss 文件中，并且我遇到了一些问题。我看过一些节点的例子......

javascript angular typescript sass angular6

回答 6 投票 0

Angular 材料：突出显示周末的日期选择器

我想在日期选择器上突出显示周末（周六和周日）。我尝试重新调整使用布尔值表示日期位置 0（星期日）和位置 6（星期六）的lockedweekendfilter...

css angular typescript angular6 angular-material-6

回答 2 投票 0

如何从单选按钮角度获取选中的值

我需要从角度单选按钮获取值。假设有这样的html代码：我需要从角度单选按钮获取值。假设有这样的html代码： <label class="radio-inline"> <input class="form-check-input" type="radio" [(ngModel)]="dog" name="gob" value="i" [checked]="true" (change)="onItemChange(item)"/>Dog </label> <label class="radio-inline"> <input class="form-check-input" type="radio" [(ngModel)]="cat" name="cat" value="p" (change)="onItemChange(item)"/>Cat </label> 在我的 ts 页面中，我需要获取单选按钮的值喜欢 dog.value 我的目的是：将默认检查设置为第一个单选按钮单击单选按钮时获取值有人可以帮助我吗？可以绑定单选按钮的数据。只需添加单选按钮的值并在 ngModel 中进行更改 html <input class="form-check-input" type="radio" value="dog" [(ngModel)]="dog.value" name="gob" value="i" [checked]="true" (change)="onItemChange($event.target.value)"/> ts onItemChange(value){ console.log(" Value is : ", value ); } 最简单的方法之一就是这样做： html： <input type="radio" id="a" name="sample" value="pure" (change)="onChange($event)" checked /> <label for="a">A</label> <input type="radio" id="b" name="sample" value="b" (change)="onChange($event)" /> <label for="b">B</label> ts： onChange(e) { this.type= e.target.value; } 在您的代码中，为了对单选按钮进行分组，它们应该具有相同的 name 属性输入。要解决您的问题，您可以使用 *ngFor 循环播放无线电输入， HTML： <div *ngFor="let opt of options; let i=index"> <label class="radio-inline"> <input type="radio" class="form-check-input" [value]="opt.value" [name]="opt.name" [checked]="i == 0" (change)="onRadioChange(opt)"/> </label> </div> TS： interface Option { name: string; value: string; } options: Option[] = [ { name: "pet", value: "dog" }, { name: "pet", value: "cat" } ] onRadioChange(opt: Option) { console.log(`Value is: ${opt.value}`) } 定义无线电组

angular angular6

回答 3 投票 0

减少角度材质树中的行高

我正在使用角树材质来显示 JSON 数据，我对行之间的白色间距量不满意。我尝试在 css 中使用 mat-tree-node.line-height ......

css angular angular-material angular6

回答 3 投票 0

我可以在我的计算机上使用多个 Angular 版本吗？

我已经在我的 Windows 机器上全局安装了 Angular 7.2.0。路径是 C:\Users\me\AppData\Roaming 下午 ode_modules\@angula

angular angular6 angular7

回答 0 投票 0

SSR 在 Angular 中采用错误的环境

我有 Angular 6 应用程序和 SSR。我注意到在 server.js 中的 SSR 上一次使用了错误的环境变量文件 (environment.ts)（没有 SSR 就不会发生）这是和平的竞争...