Geek Answers Handbook

Angular2 - problem using a router

First of all, I am a complete newbie in this kind of programming with nodejs, angular2 and typescript. I basically start reading https://angular.io/docs/ts/latest/guide/forms.html and https://angular.io/docs/ts/latest/guide/router.html#!#base-href to expand my application on new pages. I am using mdl to use material components in my application.
angular 2, it seems manual reboot and routing are different, so I get the following problem:
routing

reloading
I am trying to understand what is happening, can someone explain to me what is the difference between reloading and routing in angular2 and how can I fit in the routing processing on reload behavior?

Update No. 1:
index.html:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Title</title> <script defer src="/assets/js/material.min.js"></script> <link rel="stylesheet" href="/assets/css/font-awesome.min.css"> <link rel="stylesheet" href="/assets/css/material.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root><md-spinner></md-spinner></app-root> </body> </html>

app.module.ts

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './pages/layout/app.component'; import { HomeComponent } from './pages/home/app.component'; import { LoginComponent } from './pages/myaccount/login.component'; import { NotFoundComponent } from './pages/error/404.component'; import { RegisterComponent } from './pages/myaccount/register.component'; import { RouterModule, Routes } from '@angular/router'; import { LoginService } from './service/LoginService'; const appRoutes: Routes = [ { path: '', component: HomeComponent }, { path: 'series', component: AppComponent }, { path: 'login', component: LoginComponent }, { path: 'register', component: RegisterComponent }, { path: '**', component: NotFoundComponent } ]; @NgModule({ declarations: [ AppComponent, LoginComponent, HomeComponent, RegisterComponent, NotFoundComponent ], imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(appRoutes) ], providers: [LoginService], bootstrap: [AppComponent] }) export class AppModule { }

register.html:

 <div class="mdl-grid iv-padding" > <div class="mdl-layout-spacer"></div> <div class="mdl-cell mdl-cell--4-col"> <div style="text-align:center;"> <form (ngSubmit)="onSubmit()"> <div class="iv-card-wide mdl-card mdl-shadow--2dp"> <div class="mdl-card__title"> <h2 class="mdl-card__title-text">Registrierung</h2> </div> <div class="mdl-card__supporting-text"> <div class="text-field mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" required [(ngModel)]="model.username" name="username" type="text" id="username"> <label class="mdl-textfield__label" for="username" >Username</label> </div> <br /> <div class="text-field mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" [(ngModel)]="model.password" name="password" type="password" id="password"> <label class="mdl-textfield__label" for="password">Password</label> </div> <br /> <div class="text-field mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" [(ngModel)]="model.email" name="email" type="email" id="email"> <label class="mdl-textfield__label" for="email">E-Mail</label> </div> </div> <div class="mdl-card__actions mdl-card--border"> <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Registrieren</button> </div> </div> </form> </div> </div> <div class="mdl-layout-spacer"></div> </div>

RegisterComponent

 import { Component } from '@angular/core'; import { User } from '../../objects/user'; @Component({ selector: 'app-root', templateUrl: './register.component.html', styleUrls: ['./register.component.css'] }) export class RegisterComponent { model = new User(0, "", "", ""); submitted = false; onSubmit() { console.log("PW" + this.model.password); } }
+7
angular typescript
source share
3 answers

Without seeing the source code, it is difficult to understand the problem.

The simplified difference between reloading your page and using a router:

  • The router displays the route inside the tags. This allows you to load components on your page dynamically without reloading the page.
  • Reloading your page reloads the entire page, an AoT compilation event, which is much more expensive. In fact, there should not be a need to reboot, all navigation should be done in the router.

As for your problem, it seems that you are downloading this component several times. If you are talking about text overlapping with a tooltip, which may be a problem depending on how you import the material design components. Submit your code and I will try to help you.

0
source share

So, I assume that you have a problem in that the label is blocked by input before rebooting. This has nothing to do with routing / reloading (or at least not the source of the problem). Your material design Lite JS file does not do its job!

I recreated the problem here and solved it by adding lib here .

This can be caused by many factors:

  • MDL loads its script after rendering the component.
  • Your MDL.js is corrupt / not working.
  • The 3rd part of the lib you are using is not properly linked.

If you are using angular-cli , you need to add the library to the global scope. To do this, add the path to your lib in the .angular-cli.json :

 ... "scripts": [ "/assets/js/material.min.js", ... ] ...
0
source share

Material Design Lite requires additional work when dynamically rendering components. More information can be found in their documents.

TL; DR; You need to call the componentHandler.upgradeElement component after the elements have been entered into the DOM. The approach I used in the past is described in the example below.

EDIT If you want a declarative solution, this approach would look pretty good here, but I didn't use it myself.

I created a service that wraps a Material LiteHandler component

 import { Injectable } from '@angular/core'; export interface ComponentHandler { upgradeDom(); } declare var componentHandler: ComponentHandler; @Injectable() export class MaterialService { handler: ComponentHandler; constructor() { this.handler = componentHandler; } // render on next tick render() { setTimeout(() => { this.handler.upgradeDom(); }, 0); } }

Then you call the service's rendering function after the component has injected these elements into the DOM.

This is a very contrived example, but demonstrates a "where" to invoke rendering.

 import { Component, OnInit } from '@angular/core'; import { DataService } from 'services/data.service'; import { MaterialService } from 'services/material.service'; @Component({ selector: 'app-thing', templateUrl: ` <ul> <li *ngFor="let item of data"> {{data}} </li> </ul> ` }) export class ThingComponent implements OnInit { data: string[] constructor( private service: DataService, private material: MaterialService ) { } ngOnInit() { this.service.getData() .subscribe(data => { this.data = data; this.material.render(); }); } }
0
source share

More articles:


All Articles