相对路径在 Angular2 组件中不起作用 [英] Relative path is not working in Angular2 component

问题描述

在 Angular 2 的组件(导航栏)中未加载徽标

导航栏组件文件:

import { Component, OnInit } from '@angular/core';@成分({模块 ID:module.id，选择器:应用程序导航栏"，templateUrl: './navbar.component.html',styleUrls: ['./navbar.component.css']})导出类 NavbarComponent 实现 OnInit {私人网站:字符串私人网站网址:字符串构造函数(){this.website = 'Rakesh'this.websiteUrl = 'http://google.com'}ngOnInit() {}}

我在模板文件中添加了一些 html 代码，但没有加载徽标

我的徽标代码是

<a class="navbar-brand";href={{websiteUrl}}">*<img src="./logo/rakesh.png";class="img-responsive";alt=图像">*</a>

控制台输出moduleId 应该是NavbarComponent"中的一个字符串.

我的徽标路径:

navabar.component.ts标识/rakesh.png

解决方案

问题可能来自 moduleId 应该是 "NavbarComponent" 中的一个字符串.

由于 Angular CLI 现在使用 Webpack，Webpack 中的 module.id 是一个数字，而 Angular 需要一个字符串.您应该做的是删除 moduleId 元数据.

@Component({选择器:应用程序导航栏"，templateUrl: './navbar.component.html',styleUrls: ['./navbar.component.css']})

Logo not loading in Angular 2 in a component (Navbar)

navbar component file:

import { Component, OnInit } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  private website:string
  private websiteUrl:string
  constructor() {  
    this.website = 'Rakesh'
    this.websiteUrl = 'http://google.com'
   }
  ngOnInit() {
  }

}

i add some html code in template file and the logo not loading

my logo code is

<div class="navbar-header">
  <a class="navbar-brand" href="{{websiteUrl}}">
  *<img src="./logo/rakesh.png" class="img-responsive" alt="Image">*
  </a>
</div>

Output in console moduleId should be a string in "NavbarComponent".

my Logo path:

navabar.component.ts
logo/
    rakesh.png

解决方案

Problem maybe comes from moduleId should be a string in "NavbarComponent".

As Angular CLI now use Webpack, module.id in Webpack is a number, while Angular expects a string. What you should do is remove the moduleId metadata.

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})

这篇关于相对路径在 Angular2 组件中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！