我正在使用@ContentChildren进行内容投影。
现在，我需要将contentchildren查询中的组件放在我选择的位置。如果不是数组中的最后一个分隔符，我还必须添加一个额外的分隔符。因此，原因是基于给定的组件列表（内容子项），我需要创建一个新列表，其间包含额外的组件...
该如何在Angular中完成？我查找了动态组件注入，但是它总是从用于渲染组件的组件类型开始。但是在这种情况下，我已经在ContentChildren查询数组中有了组件。
答案 0 :(得分：1)
这里在工作solution
为模拟您要实现的内容，我实现了两个组件，<template>
<v-app id="app" :dark="isDark">
<Toolbar color="primary" />
<transition
name="routerAnimation"
enter-active-class="animated faster fadeIn"
>
<router-view></router-view>
</transition>
<v-snackbar
:color="alertColor"
class="animated faster heartBeat"
:dark="isDark"
v-model="alert"
:multi-line="mode === 'multi-line'"
:timeout="alertTimeout"
top
:vertical="mode === 'vertical'"
>
<v-icon class="pr-4">{{ getAlertIcon() }}</v-icon>
{{ alertMessage }}
<v-btn :dark="isDark" icon @click="toggleAlert(false)">
<v-icon>close</v-icon>
</v-btn>
</v-snackbar>
</v-app>
</template>
<script>
import { themeMixin } from "./mixins/themeMixin.js";
import Toolbar from "./components/Toolbar";
import { alertMixin } from "./mixins/alertMixin";
import { authMixin } from "./mixins/authMixin";
import { socketMixin } from "./mixins/socketMixin";
import { TokenService } from "./services/tokenService";
import { ThemeService } from "./services/themeService";
import { UserService } from "./services/userService";
import { cordMixin } from "./mixins/cordMixin";
export default {
name: "app",
mixins: [alertMixin, authMixin, cordMixin, themeMixin, socketMixin],
components: { Toolbar },
created() {
this.init();
const theme = ThemeService.getTheme();
if (theme !== null) {
this.$store.commit("theme", theme);
} else {
this.$store.commit("theme", this.isDark ? "dark" : "light");
}
},
data() {
return {
color: "#0c0c0c",
y: "top",
x: null,
mode: ""
};
},
methods: {
init() {
const token = TokenService.getToken();
const user = UserService.getUser();
if (token) {
this.$store.commit("token", token);
this.setExpiry();
}
if (user) {
this.$store.commit("user", JSON.parse(user));
}
}
},
mounted() {
this.init();
},
watch: {}
};
</script>
<style>
@import "https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css";
@import "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons";
#app {
font-family: "Hilda-Regular", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
和tabs
您可以按以下方式使用这些组件
tab在<my-tabs>
<my-tab text="Tab 1"></my-tab>
<my-tab text="Tab 2"></my-tab>
<my-tab text="Tab 3"></my-tab>
</my-tabs>
<div>------------------</div>
<my-tab text="This is rendered itself" [single]="true"></my-tab>
中，我用TabComponent包裹了ng-content，以便可以用ng-template将其注入组件中。
@ViewChild(TemplateRef) content @Component({
selector: 'my-tab',
template: `
<ng-template>
{{text}}
</ng-template>
<ng-container *ngIf="single">
<ng-container *ngTemplateOutlet="content"></ng-container>
</ng-container>
`
})
export class TabComponent {
@ViewChild(TemplateRef) content;
@Input() text;
@Input() single = false; // this will allow to use this component on its own
}
TabsComponent您可以在@Component({
selector: 'my-tabs',
template: `
<div *ngFor="let tab of tabs; let isLast = last">
<ng-container *ngTemplateOutlet="tab.content"></ng-container>
<hr *ngIf="!isLast">
</div>
`,
})
export class TabsComponent {
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
}
指令中使用tab.content。
*ngTemplateOutlet