[英]Is there a way to use a variable Angular component inside another component, and also pass data to that variable component?
What I want我想要的是
Let's say component2 is the component I want to be able to use variable components in. Let's say for an example, the variable component we'll use is component1.假设 component2 是我希望能够在其中使用可变组件的组件。例如,我们将使用的可变组件是 component1。
component1.html: <div>Hi, I'm comp 1. Data: {{data}}</div>
component1.html:
<div>Hi, I'm comp 1. Data: {{data}}</div>
component2.html: <div>Hi, I'm comp 2. Variable component: <variableComponent [data]="data"></variableComponent></div>
component2.html:
<div>Hi, I'm comp 2. Variable component: <variableComponent [data]="data"></variableComponent></div>
Usage of component2 somewhere: <component2 [variableComponent]="component1" ></component2>
在某处使用component2:
<component2 [variableComponent]="component1" ></component2>
What I'm trying to do我正在尝试做的事情
I was following the Angular expandable table example, where each row can be clicked, causing it to expand to reveal details about that row.我正在关注 Angular 可扩展表示例,其中可以单击每一行,使其展开以显示有关该行的详细信息。 https://material.angular.io/components/table/examples#table-expandable-rows
https://material.angular.io/components/table/examples#table-expandable-rows
I'd already made a generic table-component that you can pass data into, and I added expandable rows to it, but I want to be able to pass a detail-component into it as well, so that our developers can make different detail components for different objects so that we can use those detail components for the different tables.我已经制作了一个可以向其中传递数据的通用表格组件,并且我向其中添加了可扩展的行,但我也希望能够向其中传递一个详细信息组件,以便我们的开发人员可以制作不同的细节不同对象的组件,以便我们可以将这些详细组件用于不同的表。 (ie, you could make an element-detail component, which would be used if you were making a table of elements, like in the linked example, and then just pass that component in to the table-component)
(即,您可以制作一个元素详细信息组件,如果您正在制作一个元素表,就像在链接的示例中一样,然后将该组件传递给表格组件,则可以使用该组件)
I tried using [innerHTML] so I could just pass a variable HTML string to be rendered as the detail panel, which would let me stick a component and parameters in pretty easy.我尝试使用 [innerHTML],所以我可以传递一个变量 HTML 字符串以呈现为详细信息面板,这样我就可以很容易地粘贴一个组件和参数。 But it doesn't look like it's working, probably because [innerHTML] is skipping some stuff Angular does.
但它看起来不起作用,可能是因为 [innerHTML] 正在跳过 Angular 所做的一些事情。
table-component html (you might not need to read this to answer the question):表组件 html (您可能不需要阅读此内容来回答问题):
<mat-table class="lessons-table mat-elevation-z8" [dataSource]="matData" matSort [matSortActive]="tableKeys[0]" matSortDirection="asc" matSortDisableClear multiTemplateDataRows>
<ng-container *ngFor="let key of tableKeys;" [matColumnDef]="key" >
<mat-header-cell *matHeaderCellDef mat-sort-header> {{dataKeysToHeadersDictionary[key]}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row[key]}}</mat-cell>
</ng-container>
<ng-container [matColumnDef]="'expandButtonColumnDef'">
<mat-header-cell *matHeaderCellDef>:</mat-header-cell>
<mat-cell *matCellDef="let row">
<span (click)="expandedRow = expandedRow === row ? null : row">::</span>
</mat-cell>
</ng-container>
<ng-container [matColumnDef]="'expandedDetail'">
<mat-cell class="detailCell" *matCellDef="let row;" [attr.colspan]="tableKeys.length">
<div class="detailCellDiv" [@detailExpand]="row == expandedRow ? 'expanded' : 'collapsed'">
<!-- vvv THIS IS THE IMPORTANT ROW vvv -->
<div [innerHTML]="getRowDetail(row)"></div>
<!-- ^^^ THIS IS THE IMPORTANT ROW ^^^ -->
</div>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="tableKeys.concat('expandButtonColumnDef')"></mat-header-row>
<mat-row *matRowDef="let row; columns: tableKeys.concat('expandButtonColumnDef')"></mat-row>
<mat-row class="detailRow" *matRowDef="let row; columns: ['expandedDetail']"></mat-row>
</mat-table>
table-component typescript:表组件 typescript:
// Right now, this is returning a static string with html to use the account-details component
// But eventually I want this to be a dynamic or variable string so I can use whatever component I give to the table-component
getRowDetail(row): any {
return '<app-account-details style="display: flex;" [account]="row"></app-account-details>';
}
I suppose a workaround would be to make a generic-details component, and then in the html for that put an ngSwitch with every single details component I end up making, but that's a workaround.我想一种解决方法是制作一个通用细节组件,然后在 html 中放置一个 ngSwitch,其中包含我最终制作的每个细节组件,但这是一种解决方法。
EDIT: The Workaround编辑:解决方法
So, the issue is that I want to be able to "pass in" component1 to component2, but also have data pass from component2 to component1.所以,问题是我希望能够将组件 1“传递”到组件 2,但也可以将数据从组件 2 传递到组件 1。 ng-content doesn't appear to allow me to do that, so I've created a generic-variable component that you can instruct to display whatever component you want, and pass data to it also.
ng-content 似乎不允许我这样做,所以我创建了一个通用变量组件,您可以指示它显示您想要的任何组件,并将数据也传递给它。
generic-variable-component typescript:通用变量组件 typescript:
...
@Input() data: any;
@Input() componentName: string;
...
generic-variable-component.html:通用变量组件。html:
<ng-container *ngIf="componentName === 'c1'"><component1 [data]="data"></component1></ng-container>
<!-- Repeat the above with whatever components you end up needing -->
component1.html: <div>Hi, I'm comp 1. Data: {{data}}</div>
component1.html:
<div>Hi, I'm comp 1. Data: {{data}}</div>
component2.html: <div>Hi, I'm comp 2. Variable component: <generic-variable-component [data]="data" [componentName]="varCompName"></generic-variable-component></div>
component2.html:
<div>Hi, I'm comp 2. Variable component: <generic-variable-component [data]="data" [componentName]="varCompName"></generic-variable-component></div>
Usage of component2 somewhere: <component2 [varCompName]="c1" ></component2>
在某处使用 component2:
<component2 [varCompName]="c1" ></component2>
This seems to work the way I want it to.这似乎按我想要的方式工作。 The downside is that I have to go edit generic-variable-component.html every time I add a new type of component I want to use in this situation, but that's really not a big deal, you just copy that line.
不利的一面是,每次我添加一种我想在这种情况下使用的新型组件时,我都必须编辑 generic-variable-component.html,但这真的没什么大不了的,你只需复制那行。 There might be a better way to do this, involving content injection and directives, but I'm not sure how to do that.
可能有更好的方法来做到这一点,包括内容注入和指令,但我不确定如何做到这一点。
Also, I'm a bit new to posting on stackoverflow, so I'm not sure if I should mark my question as answered because of my workaround.另外,我对在 stackoverflow 上发帖有点陌生,所以我不确定是否应该将我的问题标记为已回答,因为我的解决方法是。 I think for now I'll leave it up in case someone wants to swoop in with the "correct" answer.
我想现在我会留下它,以防有人想用“正确”的答案猛扑过来。
I think you should read about content projection .我认为您应该阅读有关内容投影的内容。 What is does is give you a way to pass whatever you want to a component as a parameter.
它的作用是为您提供一种将您想要的任何内容作为参数传递给组件的方法。 For example:
例如:
Parent component父组件
<component1>
<componentAsAParameter></componentAsAParameter>
</component1>
In component1 Html you can use the component passed as aa parameter using ng-content在 component1 Html 中,您可以使用 ng-content 作为 aa 参数传递的组件
<div>
whatever you want
<ng-content></ng-content>
</div>
The Html, at runtime would look like: Html 在运行时看起来像:
<div>
whatever you want
<componentAsAParameter></componentAsAParameter>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.