Question

我正在使用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]。这是怎么做的？非常感谢！

Answer 1

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

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

另一种方法可以是在这种情况下可以使用路由。只需在模板中添加并根据您的逻辑来路由页面即可。

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

我建议为此使用路由。

Answer 2

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

这个想法是：在定义组件时，您将拥有：

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

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

Answer 3

例如以.Html形式简单地调用

My Component 1!

在模板或HTML文件中谢谢！

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

3 个答案: