Home Web Front-end JS Tutorial Detailed introduction to using angular2 modules and shared modules

Detailed introduction to using angular2 modules and shared modules

Apr 11, 2018 pm 01:32 PM
shared module

This time I bring to you, what are the precautions, the following is a practical case, let's take a look.

1. Create a module testmodule.module.ts

import { CommonModule } from '@angular/common'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from "@angular/router"; 
import { <span style="color:#cc0000;"><strong>PostSharedModule </strong></span>} from '../shared/post.module'; 
import { testModule } from './testmodule.routes'; 
import { TestMainComponent } from './test-main/test-main.component'; 
import { PostTableService } from '../manage/post-table/services/post-table.service'; 
@NgModule({ 
 declarations: [ 
  TestMainComponent 
 ], 
 imports: [ 
   CommonModule, 
   <span style="color:#ff0000;">PostSharedModule</span>, 
   RouterModule.forChild(testModule) 
 ], 
 exports:[ 
  TestMainComponent 
 ], 
 providers: [ 
  PostTableService 
 ] 
}) 
export class TestModule { }
Copy after login

2. Create moduleroutestestmodule.routes.ts

import { TestMainComponent } from './test-main/test-main.component'; 
import { PostTableComponent } from '../manage/post-table/post-table.component'; 
import { CommentTableComponent } from '../manage/comment-table/comment-table.component'; 
export const testModule = [ 
  { 
    path:'', 
    component:TestMainComponent, 
    children: [ 
      { path: '',redirectTo:'posttable/page/1',pathMatch:'full'}, 
      { path: 'posttable/page/:page', component: PostTableComponent }, 
      { path: 'commenttable/page/:page', component: CommentTableComponent }, 
      { path: '**', redirectTo:'posttable/page/1' } 
    ] 
  } 
];
Copy after login

3. Execute ng g c test-main, create component test-main, and modify test-main.component.html

<a routerLink="posttable/page/1" class="list-group-item"><span class="badge">10000</span>文章管理</a> 
    <a routerLink="commenttable/page/1" class="list-group-item"><span class="badge">1000000</span>评论管理</a>
Copy after login

Create shared module post.module.ts

import { NgModule } from '@angular/core'; 
import { ModalModule } from 'ng2-bootstrap'; 
import { PaginationModule } from 'ng2-bootstrap'; 
import { SharedModule } from './shared.module'; 
import { CommentTableComponent } from '../manage/comment-table/comment-table.component'; 
import { PostTableComponent } from '../manage/post-table/post-table.component'; 
@NgModule({ 
 imports:[  
  SharedModule, 
  ModalModule.forRoot(), 
  PaginationModule.forRoot() 
 ], 
 declarations:[  
  CommentTableComponent,  
  PostTableComponent 
 ], 
 exports:[  
  ModalModule, 
  PaginationModule, 
  CommentTableComponent,  
  PostTableComponent 
 ] 
}) 
export class PostSharedModule { 
  
}
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to use PHP’s iterator interface Iterator

Detailed explanation of PHP’s SESSION deserialization usage

The above is the detailed content of Detailed introduction to using angular2 modules and shared modules. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1655
14
PHP Tutorial
1252
29
C# Tutorial
1226
24
WLAN expansion module has stopped [fix] WLAN expansion module has stopped [fix] Feb 19, 2024 pm 02:18 PM

If there is a problem with the WLAN expansion module on your Windows computer, it may cause you to be disconnected from the Internet. This situation is often frustrating, but fortunately, this article provides some simple suggestions that can help you solve this problem and get your wireless connection working properly again. Fix WLAN Extensibility Module Has Stopped If the WLAN Extensibility Module has stopped working on your Windows computer, follow these suggestions to fix it: Run the Network and Internet Troubleshooter to disable and re-enable wireless network connections Restart the WLAN Autoconfiguration Service Modify Power Options Modify Advanced Power Settings Reinstall Network Adapter Driver Run Some Network Commands Now, let’s look at it in detail

WLAN extensibility module cannot start WLAN extensibility module cannot start Feb 19, 2024 pm 05:09 PM

This article details methods to resolve event ID10000, which indicates that the Wireless LAN expansion module cannot start. This error may appear in the event log of Windows 11/10 PC. The WLAN extensibility module is a component of Windows that allows independent hardware vendors (IHVs) and independent software vendors (ISVs) to provide users with customized wireless network features and functionality. It extends the capabilities of native Windows network components by adding Windows default functionality. The WLAN extensibility module is started as part of initialization when the operating system loads network components. If the Wireless LAN Expansion Module encounters a problem and cannot start, you may see an error message in the event viewer log.

How to share screen on WeChat Enterprise How to share screen on WeChat Enterprise Feb 28, 2024 pm 12:43 PM

More and more enterprises choose to use exclusive enterprise WeChat, which not only facilitates communication between enterprises and customers and partners, but also greatly improves work efficiency. Enterprise WeChat has rich functions, among which the screen sharing function is very popular. During the meeting, by sharing the screen, participants can display content more intuitively and collaborate more efficiently. So how to share your screen efficiently in WeChat Enterprise? For users who don’t know yet, this tutorial guide will give you a detailed introduction. I hope it can help you! How to share screen on WeChat Enterprise? 1. In the blue area on the left side of the main interface of Enterprise WeChat, you can see a list of functions. We find the "Conference" icon. After clicking to enter, three conference modes will appear.

How to share wallpaperengine with friends How to share wallpaperengine with friends Mar 18, 2024 pm 10:00 PM

Users can share the wallpapers they obtain with friends when using WallpaperEngine. Many users do not know how to share WallpaperEngine with friends. They can save their favorite wallpapers locally and then share them with friends through social software. How to share wallpaperengine with friends Answer: Save it locally and share it with friends. 1. It is recommended that you save your favorite wallpapers locally and then share them with friends through social software. 2. You can also upload it to the computer through a folder, and then click Share using the creative workshop function on the computer. 3. Use Wallpaperengine on the computer, open the options bar of the creative workshop and find

Quick Share feature not working on Samsung phones – Fix Quick Share feature not working on Samsung phones – Fix Sep 19, 2023 pm 04:25 PM

Quick Share can save Samsung users a lot of time transferring files between devices. But Samsung Galaxy users have complained about facing issues with the Quick Share feature on their phones. Typically, visibility issues in quick sharing cause this issue. So, this is the only guide you need to troubleshoot the Quick Share feature on your Galaxy device. Fix 1 – Change Quick Share Visibility Settings Toggle the Quick Share visibility setting on your phone. Quick Share might be set to the wrong settings, causing this issue. Step 1 – First, swipe up once to open the app drawer. Step 2 – Once there, open Settings. Step 3 – Go to the Settings page and open the Connected Devices tab. Step 4 – Turn on the “Quick Share” feature. Step 5

Windows 11 Folder Sharing Guide: Easily Share Your Files and Data Windows 11 Folder Sharing Guide: Easily Share Your Files and Data Mar 13, 2024 am 11:49 AM

In daily life and work, we often need to share files and folders between different devices. Windows 11 system provides convenient built-in folder sharing functions, allowing us to easily and safely share the content we need with others within the same network while protecting the privacy of personal files. This feature makes file sharing simple and efficient without worrying about leaking private information. Through the folder sharing function of Windows 11 system, we can cooperate, communicate and collaborate more conveniently, improving work efficiency and life convenience. In order to successfully configure a shared folder, we first need to meet the following conditions: All devices (participating in sharing) are connected to the same network. Enable Network Discovery and configure sharing. Know the target device

How to use NameDrop on iPhone iOS 17 How to use NameDrop on iPhone iOS 17 Sep 22, 2023 pm 11:41 PM

With the launch of the new Apple iPhone15 series mobile phones and the launch of the latest iOS17 mobile operating system, a wealth of new features, adjustments and enhancements have been brought to Apple devices. Users may be wondering how to use the new NameDrop feature on iPhone and iOS17. This guide will provide a brief overview of how to share your contact information quickly and efficiently using the new NameDrop system available on iOS17. NameDrop is a feature that allows iPhone users to quickly share their contact information with others. It's a convenient tool for social events, business meetings or social gatherings where you need to exchange contact details with new friends. However, it's important to note that NameDrop only works for sending new contacts

Shared printer cannot connect to printer Shared printer cannot connect to printer Feb 22, 2024 pm 01:09 PM

With the development of the digital era, shared printers have become an indispensable part of the modern office environment. However, sometimes we may encounter the problem that the shared printer cannot be connected to the printer, which will not only affect work efficiency, but also cause a series of troubles. This article aims to explore the reasons and solutions for why a shared printer cannot connect to the printer. There are many reasons why a shared printer cannot connect to the printer, the most common of which is network issues. If the network connection between the shared printer and the printer is unstable or interrupted, normal operation will not be possible.

See all articles