我正在尝试降级我的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中,模板很好,但不像我想要的那样(集成在主要内容中)。
我不知道我做错了什么。。。
1条答案
按热度按时间2o7dmzc51#
我发现了问题。
angular/core和angular/upgrade的版本不一样。