angular05

Verbatim https://www.dazhuanlan.com/2019/08/25/5d622ce6a5639/

1209(3-9)

The contents of two parts, the first is to jump on the left navigation of the page; the second is to click on different buttons, there are different forms also

Real

First, the relevant page jump

Disposed in the routing app.module

// This routing configuration 
const routeConfig: = the Routes [ 
  {path: 'Stock', Component: StockManageComponent} 
] 
// actually used RouterModule.forRoot (routeConfig) arranged injection route 
Imports: [ 
  BrowserModule, 
  FormsModule, 
  HttpModule ', 
  RouterModule.forRoot (routeConfig) 
]

2. Increase in content.html socket, such that when clicking the left navigation, the right side of the socket may be varied

1
2
3

<section class="content">
  <router-outlet></router-outlet>
</section>

3. Modify the menu path

<a href="javascript:;" (click)="nav('stock')"><i class="fa fa-link"></i> <span>股票管理</span></a>

constructor(public router: Router) { }

ngOnInit () { 
} 
nav (url: string) { 
	this.router.navigateByUrl (url); 
}

4. A process for css

export class MenuComponent implements OnInit {
  menus: Array<Menu>;
  currentMenuId: number;
  constructor(public router: Router) { }

  ngOnInit() {
    this.menus = [
      new Menu(1, '首页', 'index'),
      new Menu(2, '股票管理', 'stock')
    ]
  }
  nav(menu: Menu) {
    this.router.navigateByUrl(menu.Link);
    this.currentMenuId = menu.id
  }
}

export class Menu {
  constructor(
    public id: number,
    public name: string,
    public Link: string
  ) {

  }
}

//如果循环体中menu.id == currentMenuId，那么[class.active]就被使用激活
<li *ngFor="let menu of menus" [class.active]='currentMenuId == menu.id'>
  <a href="javascript:;" (click)="nav(menu)">
    <i class="fa fa-link"></i> 
    <span>{{menu.name}}</span>
  </a>
</li>

Second, the process header text

//订阅事件，进行处理
export class ContentComponent implements OnInit {
  public pageTitle: string;
  public pageDesc: string;
  constructor(
    public router: Router
  ) {
      // 订阅路由中导航结束的事件
      router.events.filter(event => event instanceof NavigationEnd)
      .subscribe((event: NavigationEnd) => {
        if (event.url === '/dash') {
          this.pageTitle = '首页'
          console.log('首页');
        } else if (event.url.startsWith('/stock')) {
          this.pageTitle = '股票信息';
          console.log('股票信息');
        }
      });
   }

  ngOnInit() {

  }
}


<h1>
  {{pageTitle}}
  <small>{{pageDesc}}</small>
</h1>

Third, the form Jump

1. Create a component stockForm

2. Create a directed stockForm routing, transmission parameters, with the past 
{path: 'stock /: id ', component: StockFormComponent}

Note : After generating a new component (ng gc new-component), to restart the service, so as to display the corresponding components

1209(3-9)

Real

First, the relevant page jump

Second, the process header text

Third, the form Jump

Guess you like