如何使用编程（.ts 文件）显示图形组件？答案

【问题标题】：How can I show a graphic component using programming (.ts files)?如何使用编程（.ts 文件）显示图形组件？
【发布时间】：2019-04-13 02:38:48
【问题描述】：

我正在使用 Angular 6 开发一个 Web 应用程序。

图形组件是与 .ts 文件中的逻辑相关联的 HTML 模板。如果在另一个打字稿文件（与另一个组件关联）中，我创建了一个实际上是一个组件的对象，我如何在模板中以图形方式可视化该对象？

代码示例：

组件 1（.ts 和 .html）：

class MyComponent1 {
 constructor(myString: string){}
}
--------------------------------
<p>My Component 1!</p>

组件 2（.ts 和 .html）：

class MyComponent2 {
 constructor(){
 }

 method() {
  let newComponent = new MyComponent1('a casual string');
  return newComponent;
 }
}
---------------------------------
{{method()}}

在 myComponent2 的 html 中，我想显示字符串“我的组件 1！” （即组件的图形部分），而不是 [object Object]。这样做的方法是什么？

【问题讨论】：

你能再解释一下，图形组件是什么意思？
我指的html指的是组件，也就是它的图形部分

标签： javascript html angular typescript components

【解决方案1】：

我认为您可以使用 *ngIf 指令进行此实现。您可以在视图中列出所有可能的组件（如果可能）并在需要时显示它们。

或者另一种方法可以使用 elementRef。你可以像在 JavaScript 中一样使用它并注入你的组件。

另一种方法是在这种情况下您可以使用路由。只需简单地在模板中输出一个并根据您的逻辑路由您的页面。

您可以在 Angular 文档中检查动态组件 Dynamic Components

我建议为此使用路由。

【讨论】：

【解决方案2】：

例如在.Html中调用对象

My Component 1!

在模板或 Html 文件中谢谢！

【讨论】：

你能解释一下这是如何回答这个问题的吗？

【解决方案3】：

这是如何使用组件的基础知识，您将很快掌握这些概念。您可以快速查看Angular docs。

这个想法是：当你定义你的组件时，你有：

@Component({
  selector: 'componentXX',
  // ...
} export class XXXComponent ...

然后，从另一个组件中，您只需在 HTML 模板中使用它：<componentXX></componentXX>，它会拉取您的组件 - 鉴于它在同一范围内，现在留在同一模块中以了解基础知识。

【讨论】：