Как я могу остановить Angular @ViewChild () от создания новых экземпляров компонентов? - PullRequest
Новая
       29

Как я могу остановить Angular @ViewChild () от создания новых экземпляров компонентов?

0 голосов
/ 07 сентября 2018

Я бы хотел, чтобы мой родительский компонент выполнял методы в дочернем компоненте (компонент рисования, который присоединяет объект RaphaelJS к контейнеру). Тем не менее, я продолжаю получать ошибки браузера, говоря, что объект не был создан. Перемещение вызова метода в дочерний класс устраняет ошибку, которая, по-видимому, предполагает, что компонент повторно создается экземпляром с помощью @ViewChild () в родительском классе.

Я бы хотел, чтобы родитель вызывал методы рисования у ребенка, и мне интересно, есть ли лучший способ сделать это. Вот некоторые идеи, которые я придумала:

  • Реализация дочернего класса как службы
  • Создайте не-Angular-ee статический класс или синглтон и просто вызовите этот
  • Восстановить дочерний класс, чтобы сохранить все его объекты в службе, и перерисовать все это в каждом ngOnInit ()

1 Ответ

0 голосов
/ 07 сентября 2018

Я нашел решение, переместив инициализацию Raphael в метод ngOnInit (), а затем переместив мой вызов @ViewChild () в родительском компоненте в метод ngAfterViewInit (). Таким образом, дочерний компонент будет иметь достаточно времени для полной инициализации, и его объект Raphael будет сгенерирован до того, как родительский объект начнет вызывать методы рисования в дочернем компоненте, для которых требуется Raphael.

Дочерний компонент: 

@Component({
    selector: 'app-g-view',
    template:  
        `<div 
        id="conP" 
        class="container-fluid" 
        style="width:600px;height:600px;"
        >
        </div>`,
    styleUrls: ['./gview.component.css']
})
export class GVComponent implements OnInit, AfterViewInit{

    private paper: Raphael;

    constructor() {}

ngOnInit()  {
    this.paper = Raphael("conP", "100%", "100%");
    console.log(this.paper);
    let border = this.paper.rect(0,0,"100%","100%");
    border.attr({fill:"white"});
    console.log(border);
    }

Родительский компонент: 

@Component({
  selector: 'app-par',
  templateUrl: './par.component.html',
  styleUrls: ['./par.component.css'],
})
export class ParComponent implements OnInit, AfterViewInit {
  @ViewChild(GVComponent) _gv: GVComponent; 

  constructor(){}

  ngAfterViewInit(){
    console.log(`testing child component after init: ${this._gv}`);
    this._gv.testMethod();
}
...