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

Question

I'm working with altair admin template. 我正在使用altair管理员模板。 Trying to convert it into an angular2 spa. 试图将其转换为angular2水疗中心。
I am using mgechev's angular-seed package. 我正在使用mgechev的angular-seed包。
mgechev's angular-seed mgechev的角种子

My file structure. 我的文件结构。 Click here to view image 点击此处查看图片

Here is my index.html 这是我的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 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 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: 认证模块：

auth.module.ts 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 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 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 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>

Everything is working fine except external js. 除了外部的js，一切都很好。 Javascripts are not working properly. Javascripts无法正常工作。 But the css files are working. 但是css文件正在运行。 Material components and modals other javascript functionality nothing is working inside angular component file. 材料组件和模态其他javascript功能在角度组件文件中没有任何作用。

Answer 1

If you want to use material components in your angular2 app, use respective library, you have to import the libraries in your module. 如果要在angular2应用程序中使用材质组件，请使用相应的库，您必须导入模块中的库。 See this link https://github.com/AngularClass/awesome-angular2/blob/gh-pages/README.md It contains a huge collection of libraries that can be used with angular2. 请参阅此链接https://github.com/AngularClass/awesome-angular2/blob/gh-pages/README.md它包含大量可与angular2一起使用的库。 Here is the seed that integrated material with angular2. 这是与angular2集成材料的种子。 https://github.com/DeviantJS/angular2-seed-material2 https://github.com/DeviantJS/angular2-seed-material2

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

问题描述

1 个解决方案

解决方案1
0 2016-10-11 14:37:31

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

问题描述

1 个解决方案

解决方案1 0 2016-10-11 14:37:31

解决方案1
0 2016-10-11 14:37:31