在angularjs应用程序中未呈现降级的Angular 组件

3phpmpom  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(256)

我正在尝试降级我的Angular 组件,以便在angularjs应用程序中使用。
我以Angular 查看了文档,但模板没有呈现在页面中。
assistance.component.ts:

import {Component} from "@angular/core";
import {downgradeComponent} from "@angular/upgrade/static";
declare var angular: angular.IAngularStatic;

@Component({
    selector: 'assistance',
    template: '<h1>Assistance</h1>',
})
export class AssistanceComponent {

    constructor() {
    }
}

angular.module('AssistanceModule', []).directive('assistance', downgradeComponent({component: AssistanceComponent}) as angular.IDirectiveFactory);

main.ts(用于Angular 应用程序):

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule,
        HttpClientModule,
        FormsModule,
        CommonModule
    ],
    declarations: [
        AssistanceComponent
    ],
    entryComponents: [
        AssistanceComponent
    ],
})
export class AppModule {
    ngDoBootstrap() {
    }
}

// Bootstrap using the UpgradeModule
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
    console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");

    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, [sampleAppModuleAngularJS.name]);
});

app.ts(对于angularjs应用程序):

export const sampleAppModuleAngularJS = angular.module('AngularJS',
        [
            'ui.router',
            'ngMessages',
            'ngSanitize',
             ...
            'AssistanceModule'
        ]).config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/home');

        $stateProvider
            .state('homeComponent', {
                url: '/home',
                template: '<home></home>'
            })
            .state('AssistanceComponent', {
                url: '/assistance',
                template: '<assistance></assistance>',
            })
});

当我使用$state.go转到url“/assistance”时, <assistance> </assistance> 显示在控制台中,但不显示Angular 模板。
如果我将assistancecomponent集成到bootstrap中,如下所示:

...
declarations: [
        AssistanceComponent
    ],
    entryComponents: [
        AssistanceComponent
    ],
    bootstrap: [
        AssistanceComponent
    ]
...

<assistance></assistance> 在index.html中,模板很好,但不像我想要的那样(集成在主要内容中)。
我不知道我做错了什么。。。

2o7dmzc5

2o7dmzc51#

我发现了问题。
angular/core和angular/upgrade的版本不一样。

相关问题