简体   繁体   English

为什么要从一个模块导出组件并在另一个模块组件中使用

[英]Why to Export Component from One Module & Use in Another Module Component

I have been trying to work on this for long hours.我一直在努力为此工作很长时间。 However, I'm finally giving up and looking for community support on this.但是,我最终放弃并寻求社区对此的支持。 Thanks in advance for the help!在此先感谢您的帮助!

I have Web Projects Module which uses Webpage Component.我有使用网页组件的 Web 项目模块。 I am importing Objects Module (which has a Navbar Component & ComponentLoaderDirective) in the Webprojects Module.我正在 Webprojects 模块中导入对象模块(具有导航栏组件和 ComponentLoaderDirective)。

& I am trying to Load the Contents of navbar.html to webpage.component.html &我正在尝试将navbar.html的内容加载到webpage.component.html

Why does Angular force me to import NavbarComponent & ComponentLoaderDirective again in weboage.components.ts?为什么 Angular 会强制我在 weboage.components.ts 中再次导入 NavbarComponent 和 ComponentLoaderDirective? Without the same I get below errors: Cannot find the name 'Navbar Component'.没有相同的我得到以下错误:找不到名称“导航栏组件”。 Cannot find the name 'ComponentLoaderDirective'.找不到名称“ComponentLoaderDirective”。

I think I'm missing something here.我想我在这里遗漏了一些东西。 Just not able to locate what is missing.只是无法找到丢失的东西。

webprojects.module.ts webprojects.module.ts

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { Global } from '../../../class.global'; //Global Class Contains the Global Variables & Functions Being Used Throughout the Project.
import { StartupService } from 'src/app/services/shared/startup.service'; //StartupService is Used to Get the Project, Page, Object & Elements on Page Load.
import { ObjectsModule } from './objects/objects.module';
import { WebpageComponent } from './webpage/webpage.component'; //WebProjectsModule Uses WebpageComponent as the View (webpage.component.html) & Controller (webpage.component.html).

@NgModule({
  declarations: [WebpageComponent], //WebProject Module Uses the Webpage Component
  imports: [HttpClientModule, ObjectsModule],
  exports: [], //Webprojects Module Exports the Webpage Component to the App Module & Other Modules Using the WebProjects Module
  providers: [StartupService, Global] //StartupService, GlobalClass are Required for the WebProjects Module to Work.  
})
export class WebProjectsModule {}

webpage.component.ts网页.component.ts

//Webpage Component is the First Component to be loaded Under the Webprojects Module.
import { Component, ViewChild, OnInit } from '@angular/core';
import { Global } from '../../../../class.global'; //Global Class Contains the Global Variables & Functions Being Used Throughout the Project.
import { Error } from '../../../../services/shared/error' //Error Class is Used to Display Errors
import { StartupService } from '../../../../services/shared/startup.service'; //StartupService is Required to Load the Project, Page, Object & Elements.
import { Project } from '../../../../services/projects/webprojects/project'; //Project Model is Required to Constrain the Type of Data Being Received from the Startup Service getProjects().
import { Projectpage } from '../../../../services/projects/webprojects/projectpage'; //Project Page Model is Required to Constrain the Type of Data Being Received from the Startup Service getProjectPage().
import { Pageobject } from '../../../../services/projects/webprojects/pageobject'; //Page Object Model is Required to Constrain the Type of Data Being Received from the Statup Service getPageObjects().
import { Property } from '../../../../services/projects/webprojects/property'; //Property Object Model is Required to Constrain the Type of Property Array Being Created for Objects & Elements.
import { SEOService } from '../../../../services/shared/seo.service'; //SEO Service is Used to Display the Page Title, Description, Other SEO Related Content on the Page.
import { ComponentLoaderDirective } from '../../../../services/shared/component-loader.directive';
import { NavbarComponent } from '../objects/navbar/navbar.component';

@Component({
  selector: 'app-webpage',
  templateUrl: './webpage.component.html',
  styleUrls: ['./webpage.component.scss']
})
export class WebpageComponent implements OnInit {
  @ViewChild(ComponentLoaderDirective, {static: true}) pageObjectLoader!: ComponentLoaderDirective;

  responseProject: Project[] = []; //Variable of Type Project Array Used to Store the Array of Projects Received from the Startup Service getProjects().
  project: any = {}; //Variable of Type Any Used to Store the Parameters of the Current Project being Loaded. Initializing with Empty Object.
  projectId: number = 0; //Variable of Type Number Used to Store the Id of the Current Project being Loaded. Initilizing with 0.
  projectType: string = 'web'; //Variable of Type String Used to Store the Type of the Current Project being Loaded. Initializing with web.
  responseProjectPage: Projectpage[] = []; //Variable of Type Projectpage Array Used to Store the Object of Projectpage Received from the Statup Service getProjectPage().
  projectPage: any = {}; //Aggregate of Type Object Used to Store the Parameters of Project Page, Project & Page. Initializing with Empty Object.
  projectPageProperties: Property[] = []; //Variable of Type Property[] Used to Store Array of Properties of Project Page.
  page: any = {}; //Variable of Type Any Used to Store the Parameters of the Current Page being Loaded.
  pageTitle: string = ''; //Variable of Type String Used to Store the Title of the Current Page being Loaded.
  pageDescription: string = ''; //Variable of Type String Used to Store the Description of the Current Page being Loaded.
  pageProperties: Property[] = []; //Variable of Type Property Used to Store the Properties of the Page being Loaded.
  pageType: string = 'home'; //Variable of Type String Used to Store the Type of Current Page being Loaded. Initializing with home by default to be loaded. Unless Overwritten by the Route.
  pageObjects: Pageobject[] = []; //Variable of Type Any Used to Store the Page & Object Parameters Relevant to the Page Being Loaded. Initializing with Empty Object.
  pageObjectProperties: Property[] = []; //Variable of Type Property[] Used to Store the Array of Page Object Properties.
  object: any = {}; //Variable of Type Any Used to Store the Object Relevant to the Page Being Loaded. Initializing with Empty Object.
  objectProperties: Property[] = []; //Variable of Type Property[] Used to Store the Array of Object Properties.
  properties: Property[] = []; //Variable of Type Property[] Used to Store Array of Properties.
  active: boolean = true; //Initializing with true. All the Requests to Get the Projects, ProjectPages & PageObjects are with Active = true.
  global = new Global();
  error = new Error();

  constructor(private startupService: StartupService, private seoService: SEOService) {};

  async ngOnInit(){
    try{
      this.responseProject = await this.startupService.getProjects(this.projectType,this.active).toPromise();  
      var i = this.responseProject.length;
      while(i--){
        if(this.responseProject[i].tags.indexOf(window.location.href) == -1){ //Using window.location.href to Get the Url Which Was Loaded & Get the Project Accordingly.
          this.responseProject.splice(i, 1); //Removes the Project from the Array if it is Not Relevant to the Current Project.
        }
      };

      if(this.responseProject.length > 0){ //Checks if Atleast 1 Project is Received.
        this.project = this.responseProject[0]; //Storing the Relevant Project in the Project Variable
        this.projectId = this.project.nid; //Storing the Relevant Project Id in the projectId Variable.

        this.responseProjectPage = await this.startupService.getProjectPage(this.projectId, this.pageType, this.active).toPromise();
        //Use the getPage() in StartupService to Get the Home Page of the Relevant Project Being Loaded.
        if(Object.keys(this.responseProjectPage).length === 1){ //Checks if the Array Received is Not Empty.          
          this.projectPage = this.responseProjectPage[0]; //Aggregate Object Received from the Database is Stored in projectPage Variable.
          this.projectPageProperties = this.projectPage.properties; //Project Page Properties which are a Part of the Aggregate Received is Separately Stored in projectPageProperties Variable.

          this.page = this.projectPage.page; //Page Object which is Part of the Aggregate Received is Separately Stored in page Variable.
          this.pageProperties = this.page.properties; //Page Properties which are a Part of the Page Object Received are Separately Stored in pageProperties Variable.
          
          //We Pick All the Properties from projectPageProperties & the Remaining Properties from pageProperties which are Not a Part of projectPageProperties.
          var namesToFilter = new Set(this.projectPageProperties.map(d => d.name)); //We Get All the Names in the projectPageProperties Array and Store them in namesToFilter Array.
          this.properties = [...this.projectPageProperties, ...this.pageProperties.filter(d => !namesToFilter.has(d.name))]; //We Merge Both the Arrays and Skip the Objects with Names in the namesToFilter Array.
          
          //Looping through the Properties Array to Get the Page Title & Description for the <head> Tag.
          this.properties.forEach((property: Property) => {   
            this.pageTitle = (property.name === 'pgTitle')?property.value:this.pageTitle;      
            this.pageDescription = (property.name === 'pgDescription')?property.value:this.pageDescription;
          });                
          this.seoService.updateTitle(this.pageTitle); //Using the SEO Service, We Update the <html><head><title> Tag of the Page.
          this.seoService.updateDescription(this.pageDescription); //Using the SEO SErvice, We Update the <html><head><meta = "description"> Tag is the Page.

          this.pageObjects = this.projectPage.pageobjects; //Storing the Page Objects Array in pageObjects Variable.
          if(this.pageObjects.length > 0){ //Checking if there is Atleast One Page Object.
            const viewContainerRef = this.pageObjectLoader.viewContainerRef; //We Use Instance of Component Loader Directive to Define Where to Load the Child Component.

            this.pageObjects.forEach((pageObject: Pageobject) => { //Looping through the Page Objects.
              this.pageObjectProperties = pageObject.properties; //Storing the Page Object Properties Array in pageObjectProperties Variable.              

              this.object = pageObject.object; //Storing the Object which is Part of Page Object in the object Variable.
              this.objectProperties = this.object.properties; //Storing the Properties of Object in the objectProperties Variable.

              //We Pick All the Properties from pageObjectProperties & the Remaining Properties from objectProperties which are Not a Part of pageObjectProperties.
              namesToFilter = new Set(this.pageObjectProperties.map(d => d.name)); //We Get All the Names in the pageObjectProperties Array and Store them in namesToFilter Array.
              this.properties = [...this.pageObjectProperties, ...this.objectProperties.filter(d => !namesToFilter.has(d.name))]; //We Merge Both the Arrays and Skip the Objects with Names in the namesToFilter Array.

              switch(this.object.path){ //Based on the Path of Object We Load the Respective Component.
                case 'NavbarComponent':{ //NavbarComponent Relates with the Object Type of navbar.
                  const componentRef = viewContainerRef.createComponent<any>(NavbarComponent);
                  componentRef.instance.properties = this.properties;
                  break;
                }
              };
            });
          } else { //Throw Error if No Page Objects Were Received.
            this.error.display('Error Loading Project in webpage.component. Unable to Fetch Page Objects Data...');
          };          
        } else { //Throw Error if Query Ran Succcessfully. However, No Project Page Was Received.
          this.error.display('Error Loading Project in webpage.component. Unable to Fetch Project Page Data...');
        };
      } else { //Throw Error if Query Ran Succcessfully. However, No Projects Were Received.
        this.error.display('Error Loading Project in webpage.component. Unable to Fetch Projects Data...');    
      };
    } catch(error){
      this.error.display('Error Loading Project in webpage.component...', error);
    };
  };
};

webpage.component.html网页.component.html

<ng-template pageObjectLoader></ng-template>
<div>Webpage Works!</div>

objects.module.ts对象.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavbarComponent } from './navbar/navbar.component';
import { ComponentLoaderDirective } from '../../../../services/shared/component-loader.directive';
import { MaterialModule } from '../material/material.module';

let components = [NavbarComponent, ComponentLoaderDirective];

@NgModule({
  declarations: [components],
  imports: [CommonModule, MaterialModule],
  exports: [components]
})
export class ObjectsModule {}

navbar.component.ts navbar.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Property } from '../../../../../services/projects/webprojects/property';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
  @Input() properties: Property[] = []; //Properties of Navbar Component
  @Input() elements: any; //Elements of Navbar Component

  class: string = '';    
  
  ngOnInit(): void {
    this.properties.forEach((property) => {
      this.class += (property.type = 'class')?(this.class == '')?property.value:' ' + property.value:'';
    });
  };
}

navbar.component.html navbar.component.html

<mat-toolbar [ngClass]="class">
    <span>Yellow Pages & Classifieds | ypandc.com</span>
</mat-toolbar>

Please read ngmodule-vs-jsmodule article that explains the difference between jsModules and ngModules.请阅读ngmodule-vs-jsmodule文章,该文章解释了 jsModules 和 ngModules 之间的区别。 They are 2 different things:它们是两个不同的东西:

JavaScript modules and NgModules can help you modularize your code, but they are very different. JavaScript 模块和 NgModules 可以帮助你模块化你的代码,但是它们有很大的不同。 Angular applications rely on both kinds of modules. Angular 应用程序依赖于这两种模块。

  1. ngModule has an 'import' property that enable importing other modules whose exported classes are needed by component templates declared in this NgModule. ngModule有一个 'import' 属性,可以导入其他模块,这些模块在此 NgModule 中声明的组件模板需要其导出的类。

  2. jsModule syntaxt that should be declared in order to use a js module in another .ts file.为了在另一个 .ts 文件中使用 js 模块而应声明的jsModule语法。

The export/import ngModule properties are necessary in order to declare which classes can be imported in other modules, and the second 'import' in your component.ts is just a typescript syntaxt for access an object in your file.导出/导入 ngModule 属性是必要的,以便声明可以在其他模块中导入哪些类,component.ts 中的第二个“导入”只是用于访问文件中对象的打字稿语法。

This is pretty simple, don't worry.这很简单,不用担心。 You need to use a SCAM (Single Component Angular Module).您需要使用SCAM (单组件角度模块)。 An example for you is below:下面是一个例子:

Create your module, only export one component!创建你的模块,只导出一个组件! - this is very important - 这个非常重要

@NgModule({
  declarations: [ModuleAComponent],
  exports: [ModuleAComponent],
  imports: [
    ButtonModule // etc
  ],
})
export class ModuleA {}

Import ModuleA in an ModuleB - see, it's simple在 ModuleB 中导入 ModuleA - 看,很简单

@NgModule({
  declarations: [ModuleBComponent],
  exports: [ModuleBComponent],
  imports: [
    ModuleB
  ],
})
export class ModuleB {}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM