Angular 5：如何创建响应式侧边栏？答案

【问题标题】：Angular 5: How do I create a responsive sidebar?Angular 5：如何创建响应式侧边栏？
【发布时间】：2018-11-12 06:38:13
【问题描述】：

网上很多建议都在谈论使用 Angular Material，但我不想只为一个组件安装该库。

按照here 的逻辑，我创建了一个可以完美用作侧边栏的组件。这个组件的 HTML 很简单：

<div class='sidebar'>
    <ng-content></ng-content>
</div>

大部分的打开/关闭逻辑是通过控制器和 css 处理的。

我现在面临的问题是我有一个需要在桌面上始终可见的表单（非侧边栏视图），并且当宽度很小时它被放入（上面）可关闭的侧边栏。

很多在线建议基本上都包括将内容放在侧边栏以及常规流程中。然后根据宽度隐藏其中一个。但这对于表单来说真的很不方便，因为我需要为两个表单实例同步输入变量（在控制器中）。

我试图避免多次定义我的表单：一个用于侧边栏视图，一个用于非侧边栏视图。理想情况下，我只想拥有一个 <form></form> 并在两个地方都有它。但我就是不知道怎么做。

【问题讨论】：

标签： html css angular

【解决方案1】：

据我了解，您希望为侧边栏视图和非侧边栏视图使用相同的表单模板。

我在这里要做的是使用 ReactiveForm 并为不同的视图创建两个 FormGroup(form_sidebar, form_nosidebar)，创建另一个要在表单中使用的 FormGroup (myform) 并调用一个事件，根据视图将 myform 的内容切换到其他两个。

即

模板：

<form [formGroup]="myform">
<input type="text" formControlName="input_1">
<input type="text" formControlName="input_2">
</form>

<button (click)="nosidebarView()">Without Sidebar View</button>
<button (click)="sidebarView()">Sidebar View</button>

控制器：

myform: FormGroup;

constructor(private builder: FormBuilder) {

}

ngOninit(){
 myform= builder.group({
   input_1: '',
   input_2: '',
 });
}

【讨论】：

这会使表单不同步，对吧？例如：当我在sidebarView时，我在input_1中输入了“abc”，那么当我切换到nonsidebarView时，form_nosidebar中的input_1将没有“abc”。所以本质上，每当他们调整浏览器的大小（并因此在不同的视图之间切换）时，我都会不断地将值从一种形式传输到另一种形式。除非我误解了你的意思，否则这是我要避免的。
哦，好吧，我以为您只是在使用“相同”视图。如果您希望它们两者同步，则只需为两者使用相同的 FormGroup。我已经编辑了上面的代码。请注意，上面的控制器和模板是一个组件。即（MyFormComponent），因此在您的视图中，只需在您想要的位置调用。