我正在使用 Altair 管理模板。尝试将其转换为 angular2 spa。
我正在使用 mgechev 的 Angular-seed 包。
mgechev's angular-seed
我的文件结构。 Click here to view image
这是我的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() { }
}登录.组件.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() {}
}登录.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之外，一切都工作正常。 JavaScript 无法正常工作。但 css 文件可以正常工作。
Material 组件和模态其他 JavaScript 功能在 Angular 组件文件中不起作用。
最佳答案
如果您想在 angular2 应用程序中使用 Material 组件，请使用相应的库，您必须在模块中导入这些库。 请参阅此链接 https://github.com/AngularClass/awesome-angular2/blob/gh-pages/README.md 它包含大量可与 angular2 一起使用的库。 这是将 Material 与 angular2 集成的种子。 https://github.com/DeviantJS/angular2-seed-material2
关于javascript - 外部 js 文件在 Angular 2 组件内不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39974914/