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

Question

我正在使用altair管理员模板。 试图将其转换为angular2水疗中心。
我正在使用mgechev的angular-seed包。
mgechev的角种子

我的文件结构。 点击此处查看图片

这是我的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