Angular-在同级组件中渲染模板

努诺·索萨（Nuno Sousa）

我对如何做到这一点不知所措：

我想在一个组件中定义一个将由同级组件呈现的部分，但要使用原始组件的上下文：想象以下组件：A，B，C和side-panel。

在侧面板中，我想显示一个用A B或C定义的表单，这样，当人们创建额外的组件时，他们可以定义将在侧面板中显示的选项表单。

对于静态设置，我可以创建一个服务以将数据从侧面板传入和传出当前的活动组件（A，B或C），但我认为EmbeddedViewRef和模板可能会有一个更灵活的选择，当应用程序由新组件D扩展时，它确实可以很好地扩展，并且不需要编辑侧面板或数据传递服务。

app.component.html

<side-panel>
</side-panel>
<router-outlet></outlet>

在侧面板组件中，我想渲染选项，该选项根据路由器插座中显示的组件而变化

a.component.html

<div>
   {{option1 * 10}}
</div>
<ng-template #options>
  <input type="number" [(ngModel)]="option1">
</ng-template>

我希望#options模板显示在侧面板组件中，该组件是A组件的同级组件。

渲染模板时，您可以注入上下文对象，但我希望上下文与A的上下文相同，以便在侧面板中选择的更改和选项会影响A组件。

对于我应该阅读的概念的任何帮助将不胜感激。

更新：

Angular CDK Portal恰好解决了这个问题。它们允许将组件的模板呈现在另一个位置-portalHost。https://material.angular.io/cdk/portal/overview

毛罗·阿吉拉（Mauro Aguilar）

不知道我是否正确理解了您想要的内容，但我认为您可以使用内容投影来使用<ng-content>标签在侧面板组件中投影组件A，B或C。

// side-panel component:
<ng-content></ng-content>

// app component
<app-side-panel>
  <router-outlet></router-outlet>
</app-side-panel>

这是一个完整的工作示例：https : //stackblitz.com/edit/angular-rzh9cw

更新：再次阅读您的问题，我认为您遇到的是状态管理问题：

我希望#options模板显示在侧面板组件中，该组件是A组件的同级组件。

<ng-template #options>
  <input type="number" [(ngModel)]="option1">
</ng-template>

由于#options模板会从组件内部和外部影响组件A的属性，因此您需要定义#options为单独的组件，以便可以在两个地方重复使用它：

选项组件：

<input #input type="number" (change)="changeOption(input.value)">

组件A：

<div>
   {{option1 * 10}}
</div>
<app-options></app-options>

侧面板组件：

<app-options></app-options>

现在，为了使OptionsComponent在组件A中进行更改，您可以使用服务来存储要更改的这些选项的状态并在应用程序中共享，这样组件A，B或C可以侦听并做出相应的反应：

期权服务：

@Injectable({ providedIn: 'root' })
class OptionsService {
  private options$ = new BehaviorSubject({
    option1: 1,
    option2: 'on',
    option3: 'blue'
  });

  public options: Observable<Options>;

  constructor() {
    this.options = this.options$.asObservable();
  }

  public changeOptions(options: Options) {
    this.options$.next(options);
  }
}

选项组件（使用OptionsService触发更改）：

constructor(private optionsService: OptionsService) {}

public changeOption(value): void {
  this.optionsService.changeOptions({
    option1: value,
    option2: 'off',
    option3: 'red'
  });
}

最后，组件A可以订阅以下更改：

constructor(private optionsService: OptionsService) {}

public ngOnInit() {
  this.optionsService.options.subscribe((options: Options) => {
    console.log(options);
    this.option1 = options.option1;
  });
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。