在 Angular 中调用 Vue 库
- 之前实现了React 库的调用,目前已经支持 Vue 库调用
- React 与 Vue 在部分设计上存在相似性,因此实现基本一样,调用基本一样
演示地址
npm 包
目前支持调用
- ng 组件中直接调用 vue 组件
<vue-outlet [component]="xxxx" [root]="true" #root></vue-outlet>
- vue 组件中直接调用 ng 组件
<NgOutletVue component={OutletRefTestComponent}></NgOutletVue>
- ng 调用 vue 组件时,children 可以为 vue 组件,也可以是 ng 组件(投影)
<vue-outlet [component]="xxxx" #child></vue-outlet>
<!-- 具名slot -->
<vue-slot-group [name]="'xxx'">
<ng-template #child let-input1="input1"></ng-template>
</vue-slot-group>
举例
-
以
ant-design-vue为例 -
ng 下
<vue-outlet [component]="Tree" [root]="true" [(model)]="bindModel" [props]="props">
<vue-slot-group [name]="'title'">
<ng-template #child let-key="key" let-title="title">
@if (key === '0-0-1-0') {
<span style="color: #1890ff"></span>
}@else{ }
</ng-template>
</vue-slot-group>
</vue-outlet>
import { Component } from '@angular/core';
import { VueOutlet, VueSlotGroup } from '@cyia/ngx-bridge/vue-outlet';
import { Button, Tree, TreeProps } from 'ant-design-vue';
const treeData: TreeProps['treeData'] = [
{
title: 'parent 1',
key: '0-0',
children: [
{
title: 'parent 1-0',
key: '0-0-0',
disabled: true,
children: [
{ title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
{ title: 'leaf', key: '0-0-0-1' },
],
},
{
title: 'parent 1-1',
key: '0-0-1',
children: [{ key: '0-0-1-0', title: 'sss' }],
},
],
},
];
const expandedKeys = ['0-0-0', '0-0-1'];
const selectedKeys = ['0-0-0', '0-0-1'];
const checkedKeys = ['0-0-0', '0-0-1'];
@Component({
selector: 'app-ant-design-vue-demo',
standalone: true,
imports: [VueOutlet, VueSlotGroup],
templateUrl: './ant-design-vue-demo.component.html',
styleUrl: './ant-design-vue-demo.component.scss',
})
export class AntDesignVueDemoComponent {
Tree = Tree;
treeData = treeData;
bindModel = { expandedKeys, selectedKeys, checkedKeys };
props = {
checkable: true,
treeData: treeData,
};
}