增加 JqxDocking 的标题 window

Question

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

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

我目前遇到的问题是 window 的标题不能分配给属性。

<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 的方法。

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

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

这样，正确的位置就会更新，每当标题更改时都会更新。

增加 JqxDocking 的标题 window

Augmenting the title of a JqxDocking window

typescript

jqxwidgets

angular