Вставить TemplateRef в объект - PullRequest
Новая
       22

Вставить TemplateRef в объект

1 голос
/ 14 июня 2019

Цель: Динамически выдвигать ссылки на ng-template s в объект.

Задача:

  1. Я вручную создаю @ViewChild для каждой ng-template ссылки.

  2. Я не уверен, как протолкнуть каждый @ViewChild в мой data объект. 

//Parent TS Component

export type ITabData = object[];

@Component({
    selector: 'app-style-guide',
    templateUrl: './style-guide.component.html',
    styleUrls: ['./style-guide.component.scss']
})
export class StyleGuideComponent implements OnInit {

// These are a couple <ng-templates> I'm referencing. But as some point we can have many more templates.

    @ViewChild('orderDetails') orderDetails: TemplateRef<any>;
    @ViewChild('anotherTemp') anotherTemp: TemplateRef<any>;

   // My Data object that I want to push all the ViewChild to.

    data: ITabData = [];

    constructor () {
        // I'm pretty sure this is incorrect since it did not work

        this.data.push({ tabLabel: 'newlabel', template: this.orderDetails });
    }

    ngOnInit () {

        // This is how I want the Data object be. 
       //But I want it to fill in programmatically. 
       // It displays in my view when I hardcode it inside the ngOnInit. But obvs that's not good.


        this.data = [
            {
                tabLabel: '1st Label',
                template: this.orderDetails
            },
            {
                tabLabel: '2nd Label',
                template: this.anotherTemp
            }
        ];
    }
}

Я ожидаю, что объект Data будет динамически заполнен новым объектом, подобным этому {tabLabel: 'My new label', template: 'my_new_template'

Если это невозможно, предложения будут высоко оценены!

Спасибо, ребята!

1 Ответ

0 голосов
/ 14 июня 2019

Вы были почти там.

Проблема в том, что вы пытаетесь вставить ссылки ViewChild в ваш массив в constructor() до того, как они будут созданы на странице, чтобы селекторы могли 'пока ничего не выбирайте.

Вместо этого сделайте это в ngOnInit() хуке жизненного цикла , как вы это делали вручную, что сработало.

Так что-то вроде:

// Illustration only, you can delete empty constructors
constructor () {}

ngOnInit() {
  this.data.push({ tabLabel: 'newlabel', template: this.orderDetails });
}

Как общее практическое правило: constructor() в Angular используется в основном только для инициализации переменных в известных (статических) значениях или для вставки ссылок на классы (например, Services).Вы не можете прикоснуться к DOM в конструкторе, потому что шаблон еще не отображался при запуске.Для этого и нужны ловушки жизненного цикла.

В качестве примечания: вместо того, чтобы вручную поддерживать этот массив объектов, возможно, было бы полезно @ViewChildren.

...