Angular 6 组件

Posted 2023-03-14

【中文标题】Angular 6 组件

【英文标题】：Angular 6 components

【发布时间】：2018-11-13 14:09:01

【问题描述】：

我的应用程序中有大约 100 个屏幕，其中 25 个是搜索屏幕。每个搜索屏幕都有多个共同点。

例如：

屏幕 #1：
**标签** **输入类型**
名字：文本框
日期：日期选择器
其他一些文本框或单选按钮

屏幕#2： **标签** **输入类型** 其他名称：文本框 日期：日期选择器 其他一些文本框或单选按钮

基本上，我将我的 servlet/jsp 应用程序迁移到 Angular 6。我今天重新搜索了如何声明组件并重用它们。我还没有完全理解 Angular 6 的语法和结构，我正在学习。

我目前的想法是：

在我的@Component，我可以有这样的东西：

@Component(
  selector: 'custom_elem',
  template: `
Generate html as per parameters provided by user
  `
export class SubscriberComponent implements OnInit   
  @Input() parameters;

我为Screen #1传递这样的参数：

<custom_elem [parameters]="['First Name', 'textbox', 'Date', 'datepicker']"></custom_elem>

请注意，对象中的第一个元素是label name，然后是input field type。

所以从组件生成的 html 将是：

First Name: <input type="text" />
Date: <input type="date" />

使用这个参数我想在我的组件中生成 html 代码。

第一季度。这可能吗？ Q2。如果是以上，那怎么办？ [请解释一下，因为今天是我体验 Angular 的第一天，我没有使用这个的背景]

注意：我也遇到了角度元素，我不想使用它，因为我读到它还没有被浏览器完全支持。因此，我无法在我的组织中获得批准。

如果需要任何进一步的细节，请在 cmets 中告诉我。提前谢谢你。

【问题讨论】：

如果你决定走这条路，你应该考虑使用一个对象数组。例如，[parameters]="['label':'First Name','type':'textbox','label':'Date','type':'datepicker']" 这将使如何使用输入更加明显。

angular.io/guide/dynamic-form

为@yurzui +1。如果您从 Angular 开始，请考虑阅读整个文档。我知道这很长而且很累，但是如果你开始了，那是完全值得的（此外，你提出的每个基本问题都会让人们将你重定向到文档，所以节省一些时间！）

教程和文档真的很有帮助。 angular.io/tutorial

@csfragstaa 你问错问题了。在 Angular 中，您不会直接操作 DOM，这不是 JQUERY，您使用对象并让 Angular 为您完成繁重的工作

【参考方案1】：

请点击此链接，这将为您提供具有不同控件类型的动态表单 您只需将 QuestionBase 类作为参数传递 Angular Reusable Component with Dynamic form

【讨论】：

如果我错了请纠正我，所以如果我在这里有 25 个搜索屏幕，那么我必须为每个屏幕定义一个新的question.service.ts？编辑：我基本上无法理解<app-question [question]="question" [form]="form"></app-question>，“问题”数据来自哪里？ [问题] => 对象，“问题” => ?请帮我理解。

问题来自调用 question.service.ts* 的 app.component.ts。它本质上是一个对象数组，用any[] 表示。该程序正在从 app.component 传递一个对象（获取数据）-> dynamic-form.component （将其转换为表单）-> dynamic- form-question（在哪里使用）。

Okie..明白了，但这种方法似乎不太好，对于每个屏幕，我都必须编写一个检索 html 组件的服务。我正在寻找的是简单地迭代用户的输入参数并通过在我的组件中循环这些参数来生成 html。请提出建议。

@csfragstaa 可能不是立即跳入表单，而是尝试使用*ngFor 循环动态加载html，然后开始将参数传递给孩子，然后开始玩传递表单。你一直说这是你的第一天，表格不是第一天的主题。