我正在关注component-relative paths angular documentation .
根据说明,我将组件 ts 和组件 html 保存在同一目录中。就本问题而言,该目录是 /app/components/first
我的组件ts包含以下代码,并命名为First.component.ts
import {Component, Injectable} from '@angular/core';
import {MyService} from "../../service/MyService";
import {ValueObj} from "../../value/ValueObj";
@Component({
moduleId: module.id,
selector: 'relative-path',
templateUrl: 'First.component.html',
providers: [MyService]
})
@Injectable()
export class FirstComponent {
public valueObjs: ValueObj[];
constructor(private _myService: MyService) {}
getAllItems(): void {
this._myService.getAllValueObjs().subscribe(
data => this.valueObjs= data, error=> console.log(error),
() => console.log("getting complete"));
}
}
我的 First.component.html 包含以下代码:
<form (ngSubmit)="getAllItems()">
<label>Value Objects</label>
<button type="submit">Search</button>
</form>
<hr>
<p style="color:red">{{error}}</p>
<h1>All Objects</h1>
<div *ngFor="let valueObj of valueObjs">{{valueObj.name}}</div>
我看过这个解决方案,The selector "my-app" did not match any elements但是,我认为它不适用。我的 main.ts 文件仅包含以下内容:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
// start the application
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
并且没有对 BrowserModule 的引用。我还看了why getting the error "The selector did not match any elements"? ,但是,我没有 boot.ts 文件来比较我的值。
最后,我查看了Angular2 CLI build EXCEPTION : The selector "app-root" did not match any elements但是,我的 Packaging.json 中没有引用 Angular-Universal。
知道我做错了什么吗?
最佳答案
我刚刚遇到了同样的问题,这个例子有点令人困惑。该行:
selector: 'relative-path',
只是组件的示例名称,它不是使用相对路径的命令。
只需添加 moduleId
行即可使相对路径起作用,因此您可以将 选择器
保留为“first-component”或之前的任何内容。
该错误消息实际上试图说明您现在拥有的选择器(“相对路径”)与index.html 文件中的内容不匹配。仅当您更改 app.module 中 bootstrap
条目中的组件时,才会发生这种情况。如果您在使用非引导模块时遇到同样的问题,您会收到更清晰的错误消息。
关于javascript - 选择器 "relative-path"没有匹配任何元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40128524/