增加 JqxDocking 窗口的标题答案

【问题标题】：Augmenting the title of a JqxDocking window增加 JqxDocking 窗口的标题
【发布时间】：2019-07-23 22:41:49
【问题描述】：

我正在查看 JqxDocking Angular 组件的文档，位于此处：https://www.jqwidgets.com/angular-components-documentation/documentation/jqxdocking/angular-docking-api.htm?search=

我试图找到一种方法来动态编辑 JqxDocking 组件中的容器

我目前遇到的问题是一个窗口不能有一个标题分配一个属性。

<div>{{title}}</div>

这会在本地化方面产生问题。我不能抽象出要说的字符串：

<div>{{ title | translate }}</div>

以下是我正在使用的示例。

<jqxDocking #docking [orientation]='"horizontal"' [width]="'100%'" [mode]="'docked'" [theme]="'dark'">
    <div> <!-- 1ST column -->
        <div id="window1" style="height: 270px;">
            <div>My Title!</div>
            <div>Sample Content!</div>
        </div>
    </div>
</jqxDocking>

上面的作品展示了一个小容器。就像我说的那样，我遇到的问题是本地化。所以我想要么将它分配给一个属性，要么用管道翻译它，它不会工作。

class MyComponent implements OnInit {
    title: string = "My Title"
    @ViewChild('docking') jqxDocking: jqxDockingComponent;
    constructor(private translate: TranslationService){}
    ngOnInit(){}
}

在标记中，将从<div>My Title!</div> 更新为<div>{{title}}</div>

似乎可能发生的是对接组件使用加载信息但从不订阅任何内容，因此一旦设置，它就被设置了。

这对我不起作用，因为我需要让它更有活力。

我希望有一个我可以利用的属性，或者一种我可以查找和扩充当前利用的 Windows 的 JqxDocking 的方法。

有没有人遇到过类似的情况，你是怎么解决的？

【问题讨论】：

标签： angular typescript jqxwidgets

【解决方案1】：

由于需要 Dom 结构，您将无法像添加指令一样添加组件，因为组件会调整 dom。

不过，在每个组件的基础上，我为输入标题字符串创建了一个 setter/getter。

@Input() set title (value : string){
  this._title = value;
  this._setText();
}
get title () { return this._title; }
_title: string = "";

private _setText() {
  this.host.nativeElement.children[0].textContent = this.translate.instant(this._title);
}

constructor(private host: ElementRef, private translate: TranslateService) { }

这样，正确的位置就会更新，并且只要标题更改就会发生。

【讨论】：