如何在Angular 4中使用JavaScript及直接引入指定Bootstrap导航栏JS

Hey there! Let's tackle your Angular 4 questions one by one, nice and clear:

Angular 4 is built on TypeScript, but integrating plain JavaScript code is totally doable—here are the most practical approaches:

• Add global JS files to your Angular CLI config
  If you have a standalone JS file, open angular-cli.json (the core config file for Angular CLI projects) and add its path to the scripts array. For example:

  "scripts": [
    "../src/assets/js/your-custom-script.js"
  ]
  

  This tells Angular to bundle the script globally, so its functions or variables will be accessible anywhere in your app.

• Declare global JS entities in your component
  If your JS code exposes global functions or variables (like myCustomFunction()), you need to let TypeScript know they exist to avoid compile errors. In your component’s .ts file, add a declaration at the top:

  declare var myCustomFunction: any;
  

  Now you can call myCustomFunction() directly in component methods like ngOnInit().

• Use require() for modular JS files
  If your JS is written as a module, you can import it using require()—just make sure to enable JS support in tsconfig.json by setting "allowJs": true. Then in your component:

  const myJsModule = require('../path/to/module.js');
  

  You can then access exports from the module like myJsModule.someMethod().

• Dynamically load scripts when needed
  For scripts you only want to load in specific components or at certain times, create a script tag dynamically in your component:

  ngOnInit() {
    const script = document.createElement('script');
    script.src = '../assets/js/conditional-script.js';
    script.type = 'text/javascript';
    document.body.appendChild(script);
  }
  

For that Bootstrap navbar snippet you mentioned, here’s how to plug its JS code into Angular 4 without converting it to TypeScript:

Step 1: Isolate the JS code #

Copy the JavaScript from the snippet into a separate file, say navbar-script.js, and save it in your project’s assets/js folder (create the folder if it doesn’t exist).

Step 2: Add the script (and jQuery, if needed) to Angular CLI #

Most Bootstrap components depend on jQuery, so first add jQuery to your angular-cli.json scripts array, followed by your navbar script:

"scripts": [
  "https://code.jquery.com/jquery-3.2.1.min.js",
  "../src/assets/js/navbar-script.js"
]

This ensures both scripts load globally and in the correct order.

Step 3: Reference the navbar element in your component #

Angular prefers template references over raw DOM selectors, so modify your navbar’s HTML template to add a reference variable:

<nav #navbarElement class="navbar navbar-default" role="navigation">
  <!-- Paste the snippet's HTML code here -->
</nav>

Step 4: Trigger the JS code after DOM is ready #

In your navbar component’s .ts file, use ViewChild to get the element reference, then run the JS logic after the component has initialized. Don’t forget to declare $ to avoid TypeScript errors:

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';

// Let TypeScript know jQuery exists globally
declare var $: any;

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  @ViewChild('navbarElement') navbar: ElementRef;

  ngOnInit() {
    // Wait for the DOM to fully render before running the script
    setTimeout(() => {
      // Replace the generic selector with your element reference
      $(this.navbar.nativeElement).dropdown(); // Adjust this to match the snippet's actual JS logic
    }, 0);
  }
}

Alternatively, you can use ngAfterViewInit() instead of setTimeout—it fires specifically after the component’s view has finished rendering.

Quick note #

If the snippet’s JS uses other global variables (beyond jQuery), declare them the same way we did with $ to keep TypeScript happy.

内容的提问来源于stack exchange，提问作者AB_Krish