angle2プロジェクトでjavascript関数を正しく追加するには？エラー "ReferenceError：openNavが定義されていません"

Question

navbarコンポーネントを作成したいのですが、navbar.component.htmlにコードを追加する方法は？私は、角度CLIを使って私のangular2プロジェクトを作成します。ここに私のコンポーネントのフォルダが構造化する方法である：

私はここ

とナビゲーションメニューhttp://www.w3schools.com/howto/howto_js_fullscreen_overlay.aspを作成するためのw3schoolで、このチュートリアルに従うている私のnavbar.component.html

<div id="myNav" class="overlay"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
    <div class="overlay-content"> 
    <a href="#">About</a> 
    <a href="#">Services</a> 
    <a href="#">Clients</a> 
    <a href="#">Contact</a> 
    </div> 
</div> 

<h2>Fullscreen Overlay Nav Example</h2> 
<p>Click on the element below to open the fullscreen overlay navigation menu.</p> 
<p>In this example, the navigation menu will slide in, from left to right:</p> 
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 

<script> 
function openNav() { 
    document.getElementById("myNav").style.width = "100%"; 
} 

function closeNav() { 
    document.getElementById("myNav").style.width = "0%"; 
} 
</script> 

ここに私のナビゲーションバーです。 component.css：

body { 
    margin: 0; 
    font-family: 'Lato', sans-serif; 
} 

.overlay { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0, 0.9); 
    overflow-x: hidden; 
    transition: 0.5s; 
} 

.overlay-content { 
    position: relative; 
    top: 25%; 
    width: 100%; 
    text-align: center; 
    margin-top: 30px; 
} 

.overlay a { 
    padding: 8px; 
    text-decoration: none; 
    font-size: 36px; 
    color: #818181; 
    display: block; 
    transition: 0.3s; 
} 

.overlay a:hover, .overlay a:focus { 
    color: #818181; 
} 

.overlay .closebtn { 
    position: absolute; 
    top: 20px; 
    right: 45px; 
    font-size: 60px; 
} 

@media screen and (max-height: 450px) { 
    .overlay a {font-size: 20px} 
    .overlay .closebtn { 
    font-size: 40px; 
    top: 15px; 
    right: 35px; 
    } 
} 

ここで私のタイスクリプトファイルnavbar.component.ts：

import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-navbar', 
    templateUrl: 'navbar.component.html', 
    styleUrls: ['navbar.component.css'] 
}) 
export class NavbarComponent { 

    constructor() { } 


} 

"ReferenceError: openNav is not defined"

はそうで私のopenNav関数がでjavascript関数として検出されていないこのエラーを私は私のプロジェクトを実行して、私は<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>にこのボタンをクリックして、私のFirefoxブラウザのコンソール印刷の私htmlの権利？どのように私は適切にangular2でjavascript関数を作成するのですか？

Answer 1

あなたのnavbar.component.tsファイルであなたのopenNavとcloseNav機能が含まれており、以下のようにあなたのhtmlを変更する必要があります：あなたのコード内

import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-navbar', 
    templateUrl: 'navbar.component.html', 
    styleUrls: ['navbar.component.css'] 
}) 
export class NavbarComponent { 

    public displayNav: boolean = false; 

    constructor() { } 

    openNav(){ 
    this.displayNav = true; 
    } 

    closeNav(){ 
    this.displayNav = false; 
    } 
} 

navbar.component.html

<div id="myNav" class="overlay" *ngIf="displayNav"> 
    <a href="javascript:void(0)" class="closebtn" (click)="closeNav()">&times;</a> 
    <div class="overlay-content"> 
    <a href="#">About</a> 
    <a href="#">Services</a> 
    <a href="#">Clients</a> 
    <a href="#">Contact</a> 
    </div> 
</div> 

<h2>Fullscreen Overlay Nav Example</h2> 
<p>Click on the element below to open the fullscreen overlay navigation menu.</p> 
<p>In this example, the navigation menu will slide in, from left to right:</p> 
<span style="font-size:30px;cursor:pointer" (click)="openNav()">&#9776; open</span>