问题标签 [angular-input]

我正在创建一个组件，我想将其用作另一个组件中的子组件，但也用作独立视图。

例如，组件将列表 和用于查看对象详细信息的面板ViewCarsComponent配对。当从列表中选择一个项目时，该项目的对象将通过 an 提供给详细信息面板，并更新面板。但是，当我导航到 时，我想单独显示详细信息面板以及 ID 为 20 的详细信息。因此，这个组件可以采用由兄弟列表组件通过 提供的对象，或者作为它的 URL 参数然后可以用来进行自己的查询。SmallCarsListComponentCarCarDetailComponentCar@Input/cars/small/20CarCar@Inputnumber

有没有更好的方法来做到这一点？是否有一些我应该编写的中间件可以检索Car与作为 URL 参数提供的 ID 对应的值，然后将其交给CarDetailComponent，因此所述组件永远不需要对Car对象本身发出请求？是否应该制作两个独立的组件，一个是为 URL 参数设计的@Input，一个是为 URL 参数设计的？

我有一个父组件、一个子组件和一个服务。父组件从服务订阅对象数据。子组件也需要监听该数据变化。哪个更好，子组件使用 @Input 从其父组件获取数据，还是让它也订阅服务？

我有一个图表组件，如下所示：

我正在通过它的父 div 操作此图表的所有样式id="chart"，但我需要在父组件中两次以上相同的组件！所以这会产生相同的 2 个 id 的问题。

所以，我决定从父组件传递 div 的 id，@Input()如下所示：

编辑子组件：

TS 文件：

HTML：

我尝试了这些技术： [id]="chartId", [attr.id]="chartId", id="{{chartId}}"

但以上都不能从输入中设置动态 id。

我创建了一个名为侧边栏的组件。该组件有 2 个输入，sideBarMode 和 sideBarSide。在 app.component 我像这样添加这个组件 <sidebar [sideBarMode]="'sliding'" [sideBarSide]="'right'"></sidebar>。

当我将上述内容用作一个标签时，它按预期工作。但是，当我做类似的事情时

它们被渲染但具有相同的类，尽管如果我将控制台记录正在传递的 ngOnInit 中的值，它们会正确显示。EG 一个 div 应该显示滑动作为一个类，而另一个显示为停靠。相反，它们都显示为停靠。

这是 HTML 模板。

这就是我检查模式的方式，无论它是否停靠在 TS 文件中，我从 ngOnInit 调用此方法。

如您所见，如果是滑动，我将 observable 设置为 true，然后在 ngOninit 中将该值分配给 barSliding，该值在 HTML 模板中用于确定类名。

停靠的是正确的，但是，滑动的正在获取停靠的属性……为什么？

我创建了一个父组件，如下所示：

父 ts 文件

我将 nameFormControls 传递给子组件并在模板和类中访问它，如下所示：

输入验证器.ts

}

输入验证器.html

项目编译成功，没有错误。

我将 controls.errors 的值设置为始终为空。为什么当名称输入框中的值发生变化时，我不能使用字符串插值打印对象 controls.errors？

app.component.html

app.component.ts

文件访问.ts

文件访问类型.ts

模板中的布尔比较没有按预期工作

参考：堆栈闪电战

我试图在 Angular 和 Vue 中构建一个选项卡组件。当我更改组件的道具时，Vue 尖叫（在控制台中引发错误）。Angular 似乎很好。

我个人认为修改组件的输入属性是不对的。我的问题是为什么 Angular 团队没有通过在控制台中抛出错误来强制执行这一点。

Vue 将显示此消息

vue.js:634 [Vue 警告]：避免直接改变 prop，因为只要父组件重新渲染，该值就会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“选择”

我有一个需要一些输入的组件，我关心的输入是 feedList。在 feedList 中有填充了自己数据的提要对象。但是，根据提要，有时在创建对象时未提供某些数据，因此未定义。

我的问题是在我的 HTML 中有一个 ngFor 并显示提要。但是例如某些提要，它们没有

已定义，因此当组件呈现时它会抱怨未定义。这是完整的 HTML

所以我关心的是摆脱控制台中的未定义错误。到目前为止我所做的是这个。

它控制台记录 ngoninit 并设置值并且 HTML 显示良好。但是，我仍然在控制台日志中收到错误消息，指出属性 feed.bla.bla.extraClass 未定义。我尝试使用构造函数并检查未定义的 extraClass 但由于某种原因，当构造函数运行时，未填充 feedList(input)。我究竟应该怎么做才能克服这个问题？

我复制了一个简单的stackblitz 来展示我遇到的问题。问题是我有一个将布尔值传递给子组件的父组件。此布尔值是子组件上的 @Input。需要注意的是，父组件使用 ChangeDetectionStrategy.OnPush。子组件没有明确设置。

当父组件在订阅方法中更改子组件的布尔输入属性时，子组件最初不会检测到更改。总是需要点击 2 次才能让子组件检测到更改。

但是，当我在订阅方法之外更改子组件的布尔输入属性时，正确检测到更改的子组件，并且一切都按预期工作（1 单击子组件以识别更改）。

App.Component.ts（父组件）

子组件 (Hello.component.ts)

如果 useHttpGet 为 true，则它不起作用，如果为 false，则一切正常。

我意识到可能有不同的方法可以做到这一点或手动触发更改检测，但我更感兴趣的是为什么这不起作用，因为这对我没有任何意义。

看到这一点的最佳方式可能是跟随 stackblitz 演示。

在 child.ts，我有一个函数 onButtonClicked，它将 revertDisabled 从 true 修改为 false。

有一个问题，即 parent.html 中的模板引用变量仍然为 revertDisabled 变量获取值为 true，即使用户在 child.ts 处执行了函数 onButtonClicked()，该函数已将 revertDisabled 值从 true 更改为 false。

我尝试通过在 parent.ts 添加 @input 来解决它，但仍然无法访问 revertDisabled 的更改值。

父.html

child.ts（接口设置.ts）