增强JQXDocking窗口的标题

Question

我正在查看jqxdocking角组件的文档，位于此处：https：//www.jqwidgets.com/angular-components-documentation/documentation/documentation/documentation/jqxdocking/jqxdocking/jqxdocking-angular-docking-docking--angular-docking-docking-docking-docmuntion-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>

看来可能发生的事情是对接组件使用负载上的信息，但从未订阅任何内容，因此设置了一旦设置，它就会设置。

这对我不起作用，因为我需要使它变得更加动态。

我希望有一个我可以利用的物业，或者是一种方法，我可以查找并增加窗户当前利用JQXDOCKING。

有人遇到类似的人，您是如何解决的？

Answer 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) { }

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