Увеличение заголовка окна JqxDocking

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>

Кажется, что может происходить то, что Docking Component использует информацию о нагрузке, но никогда не подписывается ни на что, поэтому, как только он установлен, он установлен.

Это не работает для меня, так как мне нужно, чтобы это было более динамичным.

Я надеялся, что есть свойство, которое я мог бы использовать, или такой метод, чтобы я мог искать и дополнять Windows, использующий в настоящее время JqxDocking.

Кто-нибудь сталкивался с подобным и как вы решили это?

Answer 1

Поскольку требуется структура Dom, вы не сможете добавлять компоненты, а также директивы add, поскольку компонент будет настраивать dom.

Однако для отдельных компонентов я создал установщик / получатель для входной строки заголовка.

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

Таким образом, правильное местоположение обновляется, и это происходит всякий раз, когда изменяется заголовок.