Question

我正在查看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的方法。

有人遇到过类似问题吗？您如何解决？

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窗口的标题

1 个答案: