Question

我希望通过一些很酷的功能使我的网站变得现代化。为此，我使用了jQuery和自制的东西。但这很慢，我开发的所有东西在Angular中都比较容易。

所以我开始在我的普通网站上实现Angular 2代码。东西（app.component，main.ts，app.module）工作。我的页面上有角度功能。

这是第一次尝试。

现在我发现我不能在选择器中使用第二个和第三个组件（这个不在bootstrap数组中）。因此，引导组件是我认为的所有内容的根元素。

下一步是将整个身体替换为一个组成部分。例如，使用角度1，很容易：ng-controller="app"并完成。我可以使用<body>和所有内容完成此操作。

现在使用Angular 2我必须为组件定义一个模板。否则我收到此错误Uncaught Error: No template specified for component AppComponent

所以问题是......

是否可以使用应用程序的as选择器，以便我可以在应用程序中使用组件而无需引导它们？
或者有没有办法灵活使用这些组件？

主要原因是： 我想全局定义每个页面上不得存在的组件。所以我可以拥有一个名为test-component的组件，该组件仅用于test.html，而about-component仅用于about.html

你理解吗？

目前问题是我收到此错误：app.js:116448EXCEPTION: Error in :0:0 caused by: The selector "my-app" did not match any elements和ORIGINAL EXCEPTION: The selector "my-app" did not match any elements

如果我定义它们两者都有效。但如果缺少一个组件，那么我会收到此错误。

当前脚本：

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

app.component.ts

import { Component } from '@angular/core';
import {Http} from "@angular/http";

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1> <a (click)="test()">:)</a>`
})
export class AppComponent {
    constructor (private http: Http) {}
    name = 'Angular';
    test() {
        alert('Yay');
        return this.http.get('/asd/aaa/test').subscribe((a) => {
            console.log('A', a);
        }, (b) => {
            console.log('B', b);
        });
    }
}

app.module.ts

import {NgModule}      from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent}  from './app.component';
import {JsonpModule, HttpModule} from "@angular/http";
import {FormsModule} from "@angular/forms";
import {TestComponent} from "./test.component";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule
    ],
    declarations: [
        AppComponent,
        TestComponent
    ],
    bootstrap: [
        AppComponent,
        // TestComponent // this shouldnt be a bootstrap because else the component MUST exist on the page!
    ]
})
export class AppModule {
}

test.component.ts

import { Component } from '@angular/core';
import {Http} from "@angular/http";

@Component({
    selector: 'test-app',
    template: `<h1>Hello {{name}}</h1> <a (click)="test()">:)</a>`
})
export class TestComponent {
    constructor (private http: Http) {}
    name = 'Angular !!!!!!!!!!!!';
    test() {
        alert('yyyyy');
        return this.http.get('/asd/aaa/test').subscribe((a) => {
            console.log('A', a);
        }, (b) => {
            console.log('B', b);
        });
    }
}

正如我所说，如果我想将身体用作根元素，它会取代身体的一切。这不适合我的用例。

这只是一个普通的网站。多个HTML（背景= PHP）页面。

我可以在需要某些内容的每个页面上实现此platformBrowserDynamic().bootstrapModule(AppModule);。然后我可以为每个页面编写一个模块。我认为这也可以解决问题。但这很糟糕......有很多模块......

正常的网站正文作为Angular 2 Component而不替换它们

0 个答案: