Angular downgradeComponent未创建 [英] Angular downgradeComponent not being created

问题描述

我刚刚设置了带有downgradeModule的混合AngularJS/Angular 5应用程序.我已经将一个很小的组件从AngularJS转换为Angular，但从未创建过.我在整个组件中放置了console.logs，以查看是否调用了某些位，而没有调用其他位.文件已加载，但组件从未加载.

I have just setup a hybrid AngularJS / Angular 5 application with downgradeModule. I have converted a very small component from AngularJS to Angular but it is never being created. I have put console.logs throughout the component to see if certain bits are called and others not. The file is loaded but the component never is.

我已经读了数百本教程，但是我一定会缺少一些东西.

I have read what feels like hundreds of tutorials but I must be missing something.

请注意，我在转换组件方面已经走了很远，意识到它没有被创建，然后停止移植其余部分.因此，为什么driverImage当前不在转换后的组件上.

Note that I got this far in converting the component, realised it was not being created, then stopped porting the rest. Hence why driverImage is not currently on the converted component.

这是一个带有测试组件的stackblitz，它显示不起作用 https://angularjs-q1vrpe.stackblitz .io/

Here is a stackblitz with a test component that shows it not working 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']);

App.Module (MainAngularModule)

App.Module (MainAngularModule)

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() { }
}

index.module (为简洁起见，删除了大多数依赖项)

index.module (Stripped most of the dependencies out for brevity)

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() { }
}

相关的 modules.ts

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

推荐答案

答案实际上非常简单，我花了很长时间才看到它.

The answer is actually really simple, it just took me forever to see it.

与您可能会相信的相反，您需要更改AngularJS组件才能将其注册为指令，而不是组件.

Contrary to what you might believe, you need to change your AngularJS component to be registered as a directive, NOT, a component.

这篇关于Angular downgradeComponent未创建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！