我需要帮助。 我正在创建一个项目，我在使模板工作时遇到问题。 我为Header创建了一个组件，为菜单创建了一个组件。菜单是侧边栏，在您打开页面时会隐藏。只有在登录后才会出现菜单。但是之后javascript不起作用。
.angular-cli.json
------------------------------------------------------------------------
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "ticket.web.api"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": ["assets", "favicon.ico"],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"./assets/fonts/feather/style.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"./assets/fonts/flag-icon-css/css/flag-icon.min.css",
"./assets/vendors/css/extensions/pace.css",
"./assets/vendors/css/ui/prism.min.css",
"./assets/css/app.min.css",
"./assets/css/core/menu/menu-types/vertical-menu.min.css",
"./assets/css/core/colors/palette-gradient.min.css",
"./assets/vendors/css/forms/icheck/icheck.css",
"./assets/vendors/css/forms/icheck/custom.css",
"./assets/css/pages/login-register.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/perfect-scrollbar/min/perfect-scrollbar.min.js",
"./assets/vendors/js/unison/js/unison.js",
"../node_modules/block-ui/jquery.blockUI.js",
"../node_modules/jquery-match-height/dist/jquery.matchHeight.js",
"./assets/vendors/js/slide-menu/slide-menu.js",
"../node_modules/screenfull/dist/screenfull.js",
"../node_modules/pace-js/pace.min.js",
"../node_modules/prismjs/prism.js",
"./assets/vendors/js/forms/icheck/icheck.min.js",
"./assets/vendors/js/forms/validation/jqBootstrapValidation.js",
"./assets/js/scripts/forms/form-login-register.min.js",
**"./assets/js/core/app-menu.min.js",
"./assets/js/core/app.min.js",
"./assets/js/scripts/customizer.min.js"**
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
Header Component ------------------------------------------------------------------------
<nav class="header-navbar navbar-expand-md navbar navbar-with-menu fixed-top navbar-light navbar-shadow" ***ngIf="url != '/sign-in'"** >
<div class="navbar-wrapper">
<div class="navbar-header">
<ul class="nav navbar-nav flex-row">
<li class="nav-item mobile-menu d-md-none mr-auto">
**<a class="nav-link nav-menu-main menu-toggle hidden-xs" href="#">**
<i class="ft-menu font-large-1"></i>
</a>
</li>
<li class="nav-item">
<a class="navbar-brand" [routerLink]="['/']">
<img class="brand-logo" alt="stack admin logo" src="assets/images/logo/stack-logo.png">
<h2 class="brand-text">Stack</h2>
</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link open-navbar-container" data-toggle="collapse" data-target="#navbar-mobile">
<i class="fa fa-ellipsis-v"></i>
</a>
</li>
</ul>
</div>
<div class="navbar-container content">
<div class="collapse navbar-collapse" id="navbar-mobile">
<ul class="nav navbar-nav mr-auto float-left">
<li class="nav-item d-none d-md-block" *ngIf="userLogged">
<a class="nav-link nav-menu-main menu-toggle hidden-xs" href="#">
<i class="ft-menu"></i>
</a>
</li>
<li class="dropdown nav-item mega-dropdown">
<a class="dropdown-toggle nav-link" href="#" data-toggle="dropdown">Menu</a>
<ul class="mega-dropdown-menu dropdown-menu row">
<li class="col-md-2">
<h6 class="dropdown-menu-header text-uppercase mb-1">
<i class="fa fa-newspaper-o"></i> News</h6>
<div id="mega-menu-carousel-example">
<div>
<img class="rounded img-fluid mb-1" src="assets/images/slider/slider-2.png" alt="First slide">
<a class="news-title mb-0" href="#">Poster Frame PSD</a>
<p class="news-content">
<span class="font-small-2">January 26, 2016</span>
</p>
</div>
</div>
</li>
<li class="col-md-3">
<h6 class="dropdown-menu-header text-uppercase">
<i class="fa fa-random"></i> Drill down menu</h6>
<ul class="drilldown-menu">
<li class="menu-list">
<ul>
<li>
<a class="dropdown-item" href="layout-2-columns.html">
<i class="ft-file"></i> Page layouts & Templates</a>
</li>
<li>
<a href="#">
<i class="ft-align-left"></i> Multi level menu</a>
<ul>
<li>
<a class="dropdown-item" href="#">
<i class="fa fa-bookmark-o"></i> Second level</a>
</li>
<li>
<a href="#">
<i class="fa fa-lemon-o"></i> Second level menu</a>
<ul>
<li>
<a class="dropdown-item" href="#">
<i class="fa fa-heart-o"></i> Third level</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="fa fa-file-o"></i> Third level</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="fa fa-trash-o"></i> Third level</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="fa fa-clock-o"></i> Third level</a>
</li>
</ul>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="fa fa-hdd-o"></i> Second level, third link</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="fa fa-floppy-o"></i> Second level, fourth link</a>
</li>
</ul>
</li>
<li>
<a class="dropdown-item" href="color-palette-primary.html">
<i class="ft-camera"></i> Color pallet system</a>
</li>
<li>
<a class="dropdown-item" href="sk-2-columns.html">
<i class="ft-edit"></i> Page starter kit</a>
</li>
<li>
<a class="dropdown-item" href="changelog.html">
<i class="ft-minimize-2"></i> Change log</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="fa fa-life-ring"></i> Customer support center</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="col-md-3">
<h6 class="dropdown-menu-header text-uppercase">
<i class="fa fa-list-ul"></i> Accordion</h6>
<div id="accordionWrap" role="tablist" aria-multiselectable="true">
<div class="card border-0 box-shadow-0 collapse-icon accordion-icon-rotate">
<div class="card-header p-0 pb-2 border-0" id="headingOne" role="tab">
<a data-toggle="collapse" data-parent="#accordionWrap" href="#accordionOne" aria-expanded="true" aria-controls="accordionOne">Accordion Item #1</a>
</div>
<div class="card-collapse collapse show" id="accordionOne" role="tabpanel" aria-labelledby="headingOne" aria-expanded="true">
<div class="card-content">
<p class="accordion-text text-small-3">Caramels dessert chocolate cake pastry jujubes bonbon. Jelly wafer jelly beans. Caramels chocolate
cake liquorice cake wafer jelly beans croissant apple pie.</p>
</div>
</div>
<div class="card-header p-0 pb-2 border-0" id="headingTwo" role="tab">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionWrap" href="#accordionTwo" aria-expanded="false"
aria-controls="accordionTwo">Accordion Item #2</a>
</div>
<div class="card-collapse collapse" id="accordionTwo" role="tabpanel" aria-labelledby="headingTwo" aria-expanded="false">
<div class="card-content">
<p class="accordion-text">Sugar plum bear claw oat cake chocolate jelly tiramisu dessert pie. Tiramisu macaroon muffin jelly
marshmallow cake. Pastry oat cake chupa chups.</p>
</div>
</div>
<div class="card-header p-0 pb-2 border-0" id="headingThree" role="tab">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionWrap" href="#accordionThree" aria-expanded="false"
aria-controls="accordionThree">Accordion Item #3</a>
</div>
<div class="card-collapse collapse" id="accordionThree" role="tabpanel" aria-labelledby="headingThree" aria-expanded="false">
<div class="card-content">
<p class="accordion-text">Candy cupcake sugar plum oat cake wafer marzipan jujubes lollipop macaroon. Cake dragée jujubes donut
chocolate bar chocolate cake cupcake chocolate topping.</p>
</div>
</div>
</div>
</div>
</li>
<li class="col-md-4">
<h6 class="dropdown-menu-header text-uppercase mb-1">
<i class="fa fa-envelope-o"></i> Contact Us</h6>
<form ngControl="ControlName" class="form form-horizontal">
<div class="form-body">
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="inputName1">Name</label>
<div class="col-sm-9">
<div class="position-relative has-icon-left">
<input class="form-control" type="text" id="inputName1" placeholder="John Doe">
<div class="form-control-position pl-1">
<i class="fa fa-user-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="inputEmail1">Email</label>
<div class="col-sm-9">
<div class="position-relative has-icon-left">
<input class="form-control" type="email" id="inputEmail1" placeholder="john@example.com">
<div class="form-control-position pl-1">
<i class="fa fa-envelope-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="inputMessage1">Message</label>
<div class="col-sm-9">
<div class="position-relative has-icon-left">
<textarea class="form-control" id="inputMessage1" rows="2" placeholder="Simple Textarea"></textarea>
<div class="form-control-position pl-1">
<i class="fa fa-commenting-o"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-1">
<button class="btn btn-primary float-right" type="button">
<i class="fa fa-paper-plane-o"></i> Send</button>
</div>
</div>
</div>
</form>
</li>
</ul>
</li>
**<li class="nav-item nav-search">
<a class="nav-link nav-link-search" href="#">
<i class="ficon ft-search"></i>
</a>
<div class="search-input">
<input class="input" type="text" placeholder="Explore Stack...">
</div>
</li>**
</ul>
<ul class="nav navbar-nav float-right">
<li class="dropdown dropdown-language nav-item">
<a class="dropdown-toggle nav-link" id="dropdown-flag" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="flag-icon flag-icon-gb"></i>
<span class="selected-language">Idioma</span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdown-flag">
<a class="dropdown-item" href="#">
<i class="flag-icon flag-icon-gb"></i> English</a>
<a class="dropdown-item" href="#">
<i class="flag-icon flag-icon-fr"></i> French</a>
<a class="dropdown-item" href="#">
<i class="flag-icon flag-icon-cn"></i> Chinese</a>
<a class="dropdown-item" href="#">
<i class="flag-icon flag-icon-de"></i> German</a>
</div>
</li>
<li class="dropdown dropdown-user nav-item">
<a *ngIf="!userLogged" class=" nav-link nav-menu-main menu-toggle hidden-xs" [routerLink]="['/sign-in']">
<i class="fa fa-sign-in"></i> Entrar</a>
<a *ngIf="userLogged" class="dropdown-toggle nav-link" href="#" data-toggle="dropdown">
<span class="user-name">{{ user.cn }}</span>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- <a class="dropdown-item" href="user-profile.html">
<i class="ft-user"></i> Edit Profile</a>
<a class="dropdown-item" href="email-application.html">
<i class="ft-mail"></i> My Inbox</a>
<a class="dropdown-item" href="user-cards.html">
<i class="ft-check-square"></i> Task</a>
<a class="dropdown-item" href="chat-application.html">
<i class="ft-message-square"></i> Chats</a>
<div class="dropdown-divider"></div> -->
<a class="dropdown-item" (click)="logout()">
<i class="ft-power"></i> Sair</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
Menu Component ------------------------------------------------------------------------
**<div class="main-menu menu-fixed menu-light menu-accordion menu-shadow menu-bordered" data-scroll-to-active="true" *ngIf="url != '/sign-in' && userLogged">**
<div class="main-menu-content">
<ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
<li class="navigation-header">
<span>General</span>
<i class=" ft-minus" data-toggle="tooltip" data-placement="right" data-ori`enter code here`ginal-title="General"></i>
</li>
<li class="nav-item">
<a [routerLink]="['/dashboard']">
<i class="ft-home"></i>
<span class="menu-title" data-i18n="">Dashboard</span>
</a>
</li>
</ul>
</div>
</div>
Menu Component
------------------------------------------------------------------------
import { Component, OnInit, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';
import { AuthService } from '../../../security/services/auth.service';
import { User } from '../../../security/model/auth.model';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { THROW_IF_NOT_FOUND } from '@angular/core/src/di/injector';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit, AfterViewInit {
isLoggedIn$: Observable;
userLogged: boolean;
url: string;
user: User;
constructor(private authService: AuthService, private router: Router) {
router.events
.filter(event => event instanceof NavigationEnd)
.subscribe((event: NavigationEnd) => {
this.isLoggedIn$ = this.authService.isLoggedIn;
this.isLoggedIn$.subscribe(res => (this.userLogged = res));
this.url = event['url'];
const body = document.getElementsByTagName('body')[0];
if (this.userLogged === false) {
body.classList.remove('menu-expanded');
} else {
body.classList.add('menu-expanded');
}
this.user = JSON.parse(localStorage.getItem('currentUser'));
});
}
ngOnInit() {
console.log('Header Component - ngOnInit');
}
ngAfterViewInit() {
console.log('Header Component - ngAfterViewInit');
console.log('---------------------------------------');
$.getScript('../../../../assets/js/core/app.min.js').done(function() {
console.log('Header app.min.js');
});
$.getScript('../../../../assets/js/core/app-menu.min.js').done(
function() {
console.log('Header app-menu.min.js');
}
);
$.getScript('../../../../assets/js/scripts/customizer.min.js').done(
function() {
console.log('Header customizer.min.js');
}
);
}
logout() {
this.authService.logout();
}
}
每当我进入登录界面时，我都会隐藏导航栏和侧边栏，当它进入并再次显示时，脚本将不再有效。当我去看检查员时，脚本会从元素中消失。
答案 0 :(得分：0)
我没有正确地帮助您。但是，从我了解您的问题的程度来看，您应该尝试将您的CSS或脚本文件添加到index.html
或者如果要将动态脚本文件动态加载到某些特定组件，则可以使用以下代码行。
ngOnInit() {
this.loadScript('your path');
}
loadScript(src){
var script = document.createElement("script");
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
script.src = src;
}
答案 1 :(得分：0)
我认为最好使用服务并使用 ReplaySubject 不要每次都添加相同的脚本。要使用它，您必须使用字符串数组调用 loadExternals。
import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';
import { forkJoin, Observable, ReplaySubject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class ExternalScriptLoading {
private libraries: { [url: string]: ReplaySubject<unknown> } = {};
constructor(@Inject(DOCUMENT) private readonly document: Document) {}
public loadExternals(externals: string[]): Observable<unknown> {
return forkJoin(externals.map((external: string) => this.inject(external)));
}
private inject(link: string): Observable<unknown> {
if (this.libraries[link]) {
return this.libraries[link].asObservable();
}
this.libraries[link] = new ReplaySubject();
this.injectScript(link);
return this.libraries[link].asObservable();
}
private injectScript(url: string): void {
const script: HTMLScriptElement = this.document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.defer = true;
script.onload = () => {
this.libraries[url].next();
this.libraries[url].complete();
};
this.document.body.appendChild(script);
}
}
来源：https://netbasal.com/loading-external-libraries-on-demand-in-angular-9dad45701801