时间戳

首页 > 解决方案 > 如何使用编程（.ts 文件）显示图形组件？

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

问题描述

我正在使用 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]。这样做的方法是什么？

标签： javascripthtmlangulartypescriptcomponents

解决方案

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

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

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

您可以在角度文档中检查动态组件 动态组件

我建议为此使用路由。

推荐阅读