Question

首先，我是使用nodejs，angular2和typescript进行此类编程的完全初学者。基本上我开始阅读https://angular.io/docs/ts/latest/guide/forms.html和https://angular.io/docs/ts/latest/guide/router.html#!#base-href以使用新页面扩展我的应用程序。我使用mdl在我的应用程序上使用材质组件。
角度2似乎手动重装和路由不同所以我得到以下问题：

我尝试了解发生了什么，有人可以解释我在angular2中重新加载和路由之间的区别，以及我如何适应路由到重新加载行为的处理？

更新＃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);
  }
}

Answer 1

如果没有看到您的源代码，就很难看到问题。

重新加载页面和使用路由器之间的简化区别是：

路由器将在标记内呈现路由。这允许您动态加载页面中的组件，而无需重新加载页面。
重新加载页面会导致重新加载整个页面，使用AoT编译的事件会更加昂贵。实际上不需要重新加载，所有导航都应该在路由器中处理。

至于您的问题，您似乎多次加载该组件。如果您正在讨论与工具提示重叠的文本，这可能是您导入材料设计组件的依赖性问题。发布您的代码，我会尽力帮助您。

Answer 2

所以，我假设你的问题是标签在重新加载之前与输入重叠。这与路由/重新加载无关（或者至少不是问题的根源）。你的材料设计精简JS文件没有完成他的工作！

我重新创建了问题here并通过添加lib here解决了这个问题。

这可能是由许多因素引起的：

MDL在渲染组件后加载它的脚本。
您的MDL.js已损坏/无效。
您正在使用的第三部分lib未正确链接。

如果您正在使用angular-cli，则需要将库添加到全局范围。为此，请在.angular-cli.json文件中添加lib的路径：

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

Answer 3

在动态渲染组件时，Material Design Lite需要一些额外的工作。更多信息可以在their docs

中找到

TLDR; 在将元素注入DOM之后，需要调用componentHandler.upgradeElement。我在过去使用的方法在下面的示例中描述。

编辑如果你想要一个声明性的解决方案this approach here看起来很不错，但我自己并没有使用它。

我创建了一个包装Material Lite componentHandler

的服务

然后在组件将元素注入DOM后调用服务的渲染函数。

这是一个非常人为的例子，但展示了＆＃34;其中＆＃34;调用渲染

public static boolean isUnique(int num, int[][] intArray) {
    boolean isUnique = true;

    for (int x = 0; x < intArray.length; x++) {
        for (int y = 0; y < intArray[x].length; y++) {
            if (num == intArray[x][y]) {
                isUnique = false;
                break;
            }
        }
    }

    return isUnique;
}

angular2 - 使用路由器发出问题

3 个答案: