如何从子对象中的父对象访问模板引用变量?

这是正常的父/子组件通信。您可以这样做,只需在子级上公开输出事件:

父母亲组成部分html摘录:

<child-component (openNav)="sidenav.open()"></child-component>

小孩组成部分ts:

@Output() openNav = new EventEmitter();

小孩组成部分html:

<button (click)="openNav.emit()">Open Nav</button>

侧导航。服务ts:

@Injectable()
export class SideNavService {
    private openNavSource = new Subject(); // never expose subjects directly
    openNav$ = this.openNavSource.asObservable();

    openNav = () => this.openNavSource.next();
}

适当提供,并将其注入父母和孩子体内使用

父母亲组成部分ts:

@ViewChild('sidenav') sidenav; // get your template reference in the component
constructor(private sideNavService: SideNavService) { }
private sideNavSub;
ngOnInit() {
   this.sideNavSub = this.sideNavService.openNav$.subscribe(() => this.sidenav.open());
}
ngOnDestroy() {
   this.sideNavSub.unsubscribe(); //clean your subscriptions
}

小孩组成部分ts:

constructor(private sideNavService: SideNavService) { }
openNav() {
   this.sideNavService.openNav(); // looks repetitive but accessing injectd services in templates is bad practice and will cause pains down the line
}

小孩组成部分html:

<button (click)="openNav()">Open Nav</button>

然后,您可以将服务注入任何任意组件,并根据需要使用它。