Совместное использование angular Component INSTANCE в приложении

Question

У меня есть приложение angular, которое содержит доску, на которой отображается активность пользователей. Эта доска видна только в некоторых областях приложения. Данные на плате не должны сохраняться в БД. Когда я просматриваю приложение, я заметил, что каждый раз создается новый экземпляр платы, поэтому все данные, содержащиеся на предыдущей плате, теряются.

Я пробовал скопировать все данные в службу Singleton и вытащить их обратно, но это кажется утомительным

Поэтому я попытался создать экземпляр общего компонента и добавить его в требуемых представлениях, но это не сработало

app.component.ts

export class AppComponent implements OnInit...{
       
    service ;//Singleton service

    constructor(private injector: Injector,private resolver: ComponentFactoryResolver){
        const factory = this.resolver.resolveComponentFactory(BoardComponent);
        const componentRef = factory.create(this.injector);
        this.service.setComponentRef(componentRef);
    }
    ......
}

В конкретном представлении я попытался вставить экземпляр компонента

@Component({
  templateUrl: `<ng-template #vwRef></ng-template><br/> <p>User Log</p>.......`,
  selector: "supervisor-panel",
  styleUrls: ["./supervisor-panel.component.css"],
}) 
export class SupervisorViewComponent implements OnInit...{

    @ViewChild("vwRef",{read: ViewContainerRef})
    refTemplate: ViewContainerRef;

    constructor(private service : SingletoneService){  }

    ngOnInit(){
       let componentRef = serivce.getComponentRef();
       this.refTemplate.insert(componentRef.hostView); 
    }

}

, в результате при ошибке

ERROR TypeError: невозможно прочитать свойство _lView of undefined в ViewContainerRef.insert (http://localhost: 4200 / vendor. js: 33661: 81)

Это правильный подход или есть альтернативное решение?

Answer 1

• 1000 1001 *

в основном вы создаете глобальную наблюдаемую переменную, слушаете ее изменения в этом компоненте, чтобы выполнять действия, которые вам нужно выполнить, когда он изменился, затем вы можете вызвать "next" для этого наблюдаемого с новым значением из любого компонент, который вы хотите

посмотрите: https://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/

Answer 2

В этом случае вы можете использовать localStorage, он доступен глобально, и данные будут сохраняться.