Question

我正在使用altair管理员模板。试图将其转换为angular2 spa 我正在使用mgechev的angular-seed包。
mgechev's angular-seed

这是我的index.html

<!DOCTYPE html>
<html  lang="en" class="app_theme_g">
<head>
  <base href="<%= APP_BASE %>">
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Remove Tap Highlight on Windows Phone IE -->
  <meta name="msapplication-tap-highlight" content="no"/>

  <link rel="icon" type="image/png" href="assets/admin/assets/img/favicon-16x16.png" sizes="16x16">
  <link rel="icon" type="image/png" href="assets/admin/assets/img/favicon-32x32.png" sizes="32x32">

  <!--Title-->
  <title>Resurgent</title>

  <!-- uikit -->
  <link rel="stylesheet" href="assets/admin/uikit/css/uikit.almost-flat.min.css" media="all">
  <!--Login page-->
  <link rel="stylesheet" href="assets/admin/css/login_page.min.css" />
  <!-- flag icons -->
  <link rel="stylesheet" href="assets/admin/icons/flags/flags.min.css" media="all">
  <!-- style switcher -->
  <link rel="stylesheet" href="assets/admin/css/style_switcher.min.css" media="all">
  <!-- altair admin -->
  <link rel="stylesheet" href="assets/admin/css/main.min.css" media="all">
  <!-- themes -->
  <link rel="stylesheet" href="assets/admin/css/themes/themes_combined.min.css" media="all">
  <!-- matchMedia polyfill for testing media queries in JS -->
  <!--[if lte IE 9]>
  <script type="text/javascript" src="assets/admin/matchMedia/matchMedia.js"></script>
  <script type="text/javascript" src="assets/admin/matchMedia/matchMedia.addListener.js"></script>
  <link rel="stylesheet" href="assets/admin/css/ie.css" media="all">
  <![endif]-->

  <!--Loading Animation-->
  <link rel="stylesheet" href="assets/loader.css">

  <!-- inject:css -->
  <!-- endinject -->
</head>
<body>

  <app-root>
    <div class="spinner">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
  </app-root>

  <!-- google web fonts -->
  <script>
    WebFontConfig = {
      google: {
        families: [
          'Source+Code+Pro:400,700:latin',
          'Roboto:400,300,500,700,400italic:latin'
        ]
      }
    };
    (function() {
      var wf = document.createElement('script');
      wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
      wf.type = 'text/javascript';
      wf.async = 'true';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(wf, s);
    })();
  </script>

  <!-- common functions -->
  <script src="assets/admin/js/common.min.js"></script>
  <!-- altair login page functions -->
  <script src="assets/admin/js/pages/login.min.js"></script>
  <!-- uikit functions -->
  <script src="assets/admin/js/uikit_custom.min.js"></script>
  <!-- altair common functions/helpers -->
  <script src="assets/admin/js/altair_admin_common.min.js"></script>


  <!--Seed Project Scripts-->
  <script>
    // Fixes undefined module function in SystemJS bundle
    function module() {}
  </script>

  <!-- shims:js -->
  <!-- endinject -->

  <% if (ENV === 'dev') { %>
  <script src="<%= APP_BASE %>app/system-config.js"></script>
  <% } %>

  <!-- libs:js -->
  <!-- endinject -->

  <!-- inject:js -->
  <!-- endinject -->

  <% if (ENV === 'dev') { %>
  <script>
  System.import('<%= BOOTSTRAP_MODULE %>')
    .catch(function (e) {
      console.error(e,'Report this error at https://github.com/mgechev/angular2-seed/issues');
    });
  </script>
  <% } %>

</body>
</html>

app.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from "@angular/router";

import { AuthComponent } from "./auth.component";
import { LoginComponent } from "./login/login.component";
import { SignupComponent } from "./signup/signup.component";

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [
    AuthComponent,
    LoginComponent,
    SignupComponent
  ],
  exports: [
    AuthComponent,
    LoginComponent,
    SignupComponent
  ],
  providers: []
})
export class AuthModule { }

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'auth',
  templateUrl: 'auth.component.html',
  styleUrls: ['auth.component.css'],
})

export class AuthComponent implements OnInit {

  title: string = "hello";

  ngOnInit() { }

}

验证模块：

auth.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from "@angular/router";

import { AuthComponent } from "./auth.component";
import { LoginComponent } from "./login/login.component";
import { SignupComponent } from "./signup/signup.component";

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [
    AuthComponent,
    LoginComponent,
    SignupComponent
  ],
  exports: [
    AuthComponent,
    LoginComponent,
    SignupComponent
  ],
  providers: []
})
export class AuthModule { }

auth.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'auth',
  templateUrl: 'auth.component.html',
  styleUrls: ['auth.component.css'],
})

export class AuthComponent implements OnInit {

  title: string = "hello";

  ngOnInit() { }

}

login.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'login',
  templateUrl: 'login.component.html',
  styleUrls: ['login.component.css'],
})

export class LoginComponent implements OnInit {

  verticalBlocks: any;

  title: string = "Login";

  ngOnInit() {}

}

login.component.html

<div class="login_page">
  <div class="login_page_wrapper">
    <div class="md-card" id="login_card">
      <div class="md-card-content large-padding" id="login_form">
        <div class="login_heading">
          <div class="user_avatar"></div>
        </div>
        <form>
          <div class="uk-form-row">
            <label for="login_username">Username</label>
            <input class="md-input" type="text" id="login_username" name="login_username" />
          </div>
          <div class="uk-form-row">
            <label for="login_password">Password</label>
            <input class="md-input" type="password" id="login_password" name="login_username" />
          </div>
          <div class="uk-margin-medium-top">
            <a class="md-btn md-btn-primary md-btn-block md-btn-large">Sign In</a>
          </div>
          <div class="uk-margin-top">
            <a class="uk-float-right">Need help?</a>
            <span class="icheck-inline">
                <input type="checkbox" name="login_page_stay_signed" id="login_page_stay_signed" data-md-icheck />
                <label for="login_page_stay_signed" class="inline-label">Stay signed in</label>
            </span>
          </div>
        </form>
      </div>
    </div>
    <div class="uk-margin-top uk-text-center">
      <a [routerLink]="['/signup']">Create an account</a>
    </div>
  </div>
</div>

除了外部的js，一切都很好。 Javascripts无法正常工作。但是css文件正在运行。材料组件和模态其他javascript功能在角度组件文件中没有任何作用。

Answer 1

如果要在angular2应用程序中使用材质组件，请使用相应的库，您必须导入模块中的库。看到这个链接 https://github.com/AngularClass/awesome-angular2/blob/gh-pages/README.md 它包含大量可与angular2一起使用的库。这是与angular2集成材料的种子。 https://github.com/DeviantJS/angular2-seed-material2

外部js文件在角度2组件内不起作用

1 个答案: