如何在XAML的不同选项卡（子项）中重复使用相同的“内容控制器”？

Question

我在XAML文件中有一个TabControl，如下所示：

<div class="form-group row form-bg">
    <label class="control-label col-sm-2">Item Type </label>
    <div class="col-sm">
        <label class="radio-inline" style="color: #fd6428; font-weight: bold;">
            <input type="radio"  name="stock" (click)="stock()"> Stock 
        </label>
        <label class="radio-inline">
           <input type="radio" name="nonStock"  (click)="nonStock()" > Non-Stock
        </label>
        <label class="radio-inline">
            <input type="radio" name="equipment"  (click)="equipment()"  > Equipment
        </label>
        <label class="radio-inline">
            <input type="radio" name="exchange" (click)="exchange()"  > Exchange
        </label>
        <label class="radio-inline">
            <input type="radio" name="loan" (click)="loan()" > Loan
        </label>
    </div>
</div>

每个选项卡都在另一个xaml文件中定义：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    selector: 'app-item-master-setup',
    templateUrl: './item-master-setup.component.html',
    styleUrls: ['./item-master-setup.component.scss']
})

/** item-master-setup component*/

export class ItemMaster {
    constructor(private router: Router) {}

    stock()
    {
        this.router.navigateByUrl('/itemmastersmodule/itemmasterpages/app-item-master-stock');
    }

    nonStock()
    {
        this.router.navigateByUrl('/itemmastersmodule/itemmasterpages/app-item-master-non-stock');
    }

    equipment() {
        this.router.navigateByUrl('/itemmastersmodule/itemmasterpages/app-item-master-equipment');
    }

    exchange() {
        this.router.navigateByUrl('/itemmastersmodule/itemmasterpages/app-item-master-exchange');
    }

    loan() {
        this.router.navigateByUrl('/itemmastersmodule/itemmasterpages/app-item-master-loan');
    }
}

其他标签页视图与此相同。

我想要做的是在TabControl中定义一个图形视图（OpenGL），然后在单个选项卡XAML中，我想要对该视图的引用。 “ //公共视图”中的每个选项卡都应具有在“选项卡控件”中定义的相同OpenGL视图。

有可能吗？