Question

我正在关注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"));
    }
}

My 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。

知道我做错了什么？

Answer 1

我刚才遇到了同样的问题，这个例子有点令人困惑。这一行：

selector: 'relative-path',

只是组件的示例名称，它不是使用相对路径的命令。

只需添加moduleId行即可使相对路径生效，因此您可以将selector保留为“第一个组件”或之前的任何内容。

错误消息实际上是在试图说你现在拥有的选择器（“relative-path”）与index.html文件中的内容不匹配。只有当您更改app.module中bootstrap条目中的组件时，才会发生这种情况。如果您遇到与非引导程序模块相同的问题，则会收到更清晰的错误消息。

选择器＆＃34; relative-path＆＃34;与任何元素都不匹配

1 个答案: