代码之家 › 专栏 › 技术社区 › Chris

未创建组件

angular-hybrid angular-upgrade angular angularjs

1

Chris · 技术社区 · 6 年前

我刚刚安装了一个混合AngularJS/angular5应用程序和降级模块。我已经将一个非常小的组件从AngularJS转换为Angular,但它从未被创建过。我将console.logs放在整个组件中,以查看是否调用了某些位,而没有调用其他位。文件已加载,但组件从未加载。

注意,我在转换组件的过程中走了这么远,意识到它没有被创建,然后停止移植其余的组件。所以为什么 driverImage 当前不在转换的组件上。

下面是一个stackblitz,其中一个测试组件显示它不工作 https://angularjs-q1vrpe.stackblitz.io/

import * as angular from "angular";

import { downgradeModule } from "@angular/upgrade/static";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { StaticProvider } from "@angular/core";

import { MainAngularModule } from "./app.module";
import "./index.module";

const bootstrapFn = (extraProviders: StaticProvider[]) => {
    console.log("1"); <--- never output!
    const platformRef = platformBrowserDynamic(extraProviders);
    return platformRef.bootstrapModule(MainAngularModule);
};

const downgradedModule = downgradeModule(bootstrapFn);

angular.module('angularJsModule', ['myApp', downgradedModule]);

angular.bootstrap(document, ['angularJsModule']);

应用程序模块 (主角度模块)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ],
    declarations: [Ng2TestComponent, DriverImageComponent],
    entryComponents: [Ng2TestComponent, DriverImageComponent]
})

export class MainAngularModule {
    // Empty placeholder method to satisfy the `Compiler`.
    ngDoBootstrap() { }
}

(为了简洁起见,去掉了大部分依赖项)

angular
    .module("myApp", [
        "constants",
        "ngMaterial",
        "ngSanitize", ... ]);

import { Component, Input, OnInit, OnChanges } from '@angular/core';
import { IDriver } from "../interfaces/IDriver";

console.log("here"); // --> This is hit

@Component({
    selector: "driver-image",
    template: `<div class="driver-image" ng-style="{'background-image' : 'url('+$ctrl.driverImage+')'}"></div>`
})

export class DriverImageComponent implements OnInit, OnChanges {
    @Input() driver: IDriver;
    @Input() small: boolean;

    constructor() {
        console.log("1"); // --- Not hit
    }

    ngOnInit() {
        console.log("ONINITNINTT"); // --> Not hit
    }

    ngOnChanges() { }
}

相关的 模块.ts

import { downgradeComponent } from "@angular/upgrade/static";
...
.component("driverImage", downgradeComponent({ component: DriverImageComponent }))

2 回复 | 直到 6 年前

1

2

Chris 6 年前

答案其实很简单,我花了很长时间才明白。

2

1

Nicolas Gehlert 6 年前

而不是 import { platformBrowser } from "@angular/platform-browser"; 改用这个 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; (不能完全告诉您区别,但平台浏览器在我的项目中不起作用)

写这篇文章的时候,我想我找到了答案。你的问题是你没有在Angular 5应用程序中加载应该降级的组件-你想要降级的所有东西仍然需要在Angular 5本身中正确加载。所以试着添加一个 entryComponents: [DriverImageComponent]

编辑:

好的,根据你的评论,看起来你的应用程序还没有启动。您确定正在当前使用的页面上使用组件吗?如果组件没有被使用,它将不会被加载,也不会被引导。

在某些情况下,您需要在一开始就强制执行此引导。

import { Component } from '@angular/core';

@Component({
    selector: 'my-bootstrap',
    template: '',
})
export class BootstrapComponent {}

将其添加到应用程序模块

declarations: [
    BootstrapComponent,
],
entryComponents: [
    BootstrapComponent,
],

通过添加 <my-bootstrap></my-bootstrap 一开始 <body>