Question

我正在尝试根据用户在下拉列表中选择的值动态注入组件。

我的要求是，每当用户更改下拉列表的值并单击视图时，组件都会被注入；但是如果用户更改下拉列表的值并单击视图，则再次注入相同的注入组件，而应重新渲染一个新组件被注射。

有什么方法可以实现这一目标。

注意：在下拉列表更改中，将调用服务，并且将从服务器返回不同的数据。

该问题的Stackblitz问题：https://stackblitz.com/edit/angular-cszxfs?file=src%2Fapp%2Fapp.component.ts

预先感谢

Answer 1

因此，首先我要删除组件，然后将其重新添加到视图中：

我的代码在这里

<ListView Grid.Row="1" x:Name="MyListView" ItemsSource="{Binding Games}">

    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>

    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <ContentControl >
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="MouseDoubleClick">
                            <prism:InvokeCommandAction Command="{Binding DataContext.OpenGameCommand, RelativeSource={RelativeSource AncestorType=UserControl}}" CommandParameter="{Binding Id}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>

                    <StackPanel>
                        <Image MaxHeight="150" IsEnabled="False" Source="{Binding Image}"/>
                        <TextBlock  Text="{Binding Name}" Margin="5,0,0,0" />
                    </StackPanel>
                </ContentControl>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 2

<div *ngIf="somecondition">
<app-componentOne></app-componentOne>
</div>

<div *ngIf="somecondition">
<app-componentTwo></app-componentTwo>
</div>

like that you can import more that one component on selection of dropdown in ng if just manage your condition if that is true accordingly component will display..

如何重新加载/刷新动态注入的组件Angular 6

2 个答案: