Question

我有一个加载屏幕组件，我想在不同模块中的不同组件中重复使用。

我有一个AppModule

 @NgModule ( {
   declarations: [
     LoadingScreenComponent  //has tag app-loading-screen
   ],
   imports: [
    ReportsModule,DashboardModule
    ]

    });
export class AppModule {
 }

在ReportsModule中我有

     @NgModule ( {
   declarations: [
     ReportsComponent
   ],
    });
export class ReportsModule {
 }

在ReportsComponent html文件中

<app-loading-screen></app-loading-screen>

这样做时会出现错误

'app-loading-screen' is not a known element

不同模块中的其他几个组件也需要使用加载屏幕组件。

为什么这会失败但我已在根模块中包含LoadingScreenComponent。或者我该怎么做呢？

Answer 1

在AppModule中声明了LoadingScreenComponent，但是导入到AppModule的ReportsModule并不了解LoadingScreenComponent。您需要重构为两者创建一个公共模块并在那里导入LoadingScreenComponent。

Answer 2

将LoadingScreenComponent添加到AppModule中的exports数组。这将使其全球可访问：

@NgModule({
    declarations: [
        LoadingScreenComponent  //has tag app-loading-screen
    ],
    imports: [
        ReportsModule,
        DashboardModule
    ],
    exports: [
        LoadingScreenComponent
    ]
})
export class AppModule {
}

否则，最好的方法是创建一个共享模块并将该模块导入到您要使用LoadingScreenComponent的任何其他模块：

import { NgModule } from '@angular/core';
import { LoadingScreenComponent } from '...'; //Path to the LoadingScreenComponent

@NgModule({
    declarations: [
        LoadingScreenComponent
    ],    
    exports: [
        LoadingScreenComponent
    ]
})
export class SharedModule { }

并将其导入其他模块：

import { SharedModule } from '...'; //Path to the SharedModule

@NgModule({
    declarations: [
        ReportsComponent
    ],
    imports[
        SharedModule
    ]
})
export class ReportsModule { }

Answer 3

您可以将 Loding screen component 作为共享模块，然后导入共享模块app模块和报告模块

import { NgModule} from '@angular/core';
@NgModule({
imports: [
],
declarations: [
 LoadingScreenComponent
],
providers: [

],
exports: [
   LoadingScreenComponent
]
})
export class SharedModule { }

然后，您可以在信息中心模块和报告模块

中导入共享模块

Answer 4

创建这样的共享模块并导入其他模块。

shared.module.ts

InputStreamReader is = new InputStreamReader(getAssets().open("test.csv"));
        BufferedReader reader = new BufferedReader(is);

        List<LatLng> latLngList = new ArrayList<LatLng>();
        List<String> siteList = new ArrayList<String>();


        String info = "";
        while ((info = reader.readLine()) != null) {
            String[] line = info.split(",");

            latitude = Double.parseDouble(line[1]);
            longitude = Double.parseDouble(line[2]);
            siteName = String.valueOf(line[0]);
            latLngList.add(new LatLng(latitude, longitude));
            siteList.add(new String(siteName));
        }

       for  (LatLng towerLatLong : latLngList){
           positionSite(towerLatLong,siteName);
       }
        for  (String siteName : siteList) {
            positionSite(towerLatLong, siteName);
        }



    }
    catch (Exception e){
    }

    }

public void positionSite(LatLng towerLatLong, String siteName) {
    MarkerOptions options = new MarkerOptions()
            .icon(BitmapDescriptorFactory.fromAsset("ctower1.png"))
            .title(siteName)
            .position(towerLatLong);


    mMap.addMarker(options);

}

在AppModule中

 @NgModule({
        imports: [
            //If needed
        ],
        declarations: [
          LoadingScreenComponent 
        ],
        exports:[LoadingScreenComponent]
 })
 export class SharedModule {}

在ReportModule中

 @NgModule ({
   imports: [
    SharedModule
    ]
  });
export class AppModule {}

Answer 5

将bootstrap: [ LoadingScreenComponent ]添加到 NgModule 。

修改

@NgModule ( { declarations: [ LoadingScreenComponent //has tag app-loading-screen ], imports: [ ReportsComponent,DashboardModule ], bootstrap: [ LoadingScreenComponent ] }); export class AppModule { }

同样在你的索引中定义了什么？

正常情况下，您可以将报告html添加到主要组件中，而不是相反。

Answer 6

请在LoadingScreenComponent中包含选择器，如下所示。选择器将用于应用程序组件

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

@Component({
    selector: 'app-loading-screen',
    templateUrl: 'loading-screen.component.html'
})

export class LoadingScreenComponent {}

Angular2导入模块中的组件

6 个答案: