英文:
Could not call Angular (v15) child component in Stackblitz
问题
我在运行 Angular 的笔记本上调用子组件时没有问题。
我相信这是版本 12。
通常情况下，我会从默认应用组件中调用子组件。
但是在 StackBlitz 中，它只有一个 index.html，所以我从那里调用子组件。
这是 main.ts 文件。
import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { InputButtonUnitComponent } from './input-button-unit/input-button-unit.component';
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule],
template: `
<h1>Hello from {{name}}!</h1>
<a target="_blank" href="https://angular.io/start">
Learn more about Angular
</a>
<br>
<p> Hello </p>
<label>Enter </label>
<input>
<button>click me</button>
`,
})
export class App {
name = 'Angular';
}
bootstrapApplication(App);
我在 index.html 中添加了子组件。
<html>
<head>
<title>My app</title>
</head>
<body>
<my-app>Loading...</my-app>
<app-child></app-child>
</body>
</html>
附上一张图片，希望清楚地显示了问题。
提前感谢！
英文:
I have no issue calling a child component on a notebook running Angular.
I believe it is version 12.
Normally I will call the child component from the default app component.
But in StackBlitz it only has index.html, so I call the child component
from there.
This is the main.ts.
import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { InputButtonUnitComponent } from './input-button-unit/input-button-unit.component';
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule],
template: `
<h1>Hello from {{name}}!</h1>
<a target="_blank" href="https://angular.io/start">
Learn more about Angular
</a>
<br>
<p> Hello </p>
<label>Enter </label>
<input>
<button>click me</button>
`,
})
export class App {
name = 'Angular';
}
bootstrapApplication(App);
I added the component at the index.html.
<html>
<head>
<title>My app</title>
</head>
<body>
<my-app>Loading...</my-app>
<app-child></app-child>
</body>
</html>
Attached is an image which hopefully shows the issue clearly.
Thanks in advance!
答案1
得分: 0
app-child 不在你的引导应用程序内。
请执行以下操作之一：
- 将
app-child移动到App的模板内。 - 为
app-child启动第二个Angular应用程序。
英文:
Your app-child is not within your bootstrapped application.
Will either :
- move
app-childwithin the template ofApp - bootstrap an second angular app for
app-child
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论