Question

我现在使用角度的最后版本 - 2.0.3。如何处理不同的路径。例如，html模板位于同一文件夹中，而nut css文件位于其他文件夹中。

@Component({    
selector: "order",
templateUrl: "./app/order/order.template.html",
styleUrls: ["./app/assets/css/order.css"]
})

如果我输入module.id，那么将只找到html文件。有人遇到某种问题吗？

Answer 1

嗯，这是可能的，但对我来说，最好的做法是将组件css放在更有条理的组件中。但是，

只需打开"moduleResolution": "node",然后更改

即可

"moduleResolution": "classic",

到

app
----components
--------order
--------------order.component.ts
--------------order.component.html
assets
----order.css

@Component({
  selector: 'selector',
  templateUrl: './order.component.html',
  styleUrls:['../../../assets/order.css']  
})

然后你可以

样本结构

{{1}}

使用Angular-cli和webpack版本进行测试。

Answer 2

此帖子有助于：http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html

我正在使用 SystemJS ，因此在我的tsconfig.json中，我设置了"module": "system"。

我还在moduleId: __moduleName添加了@Component。

然后我可以使用模板和样式的相对路径。例如：

@Component({ selector: 'datepicker-popup', moduleId: __moduleName, directives: [], providers: [], templateUrl: './datepicker.comp.html', styleUrls: ['./datepicker.css'] })

Answer 3

@Component({
selector:'my-app-product',
moduleId:module.id,
templateUrl:'product.component.html',
styleUrls: ['product.component.css']

并将您的product.component.css文件放在与html文件相同的文件夹中

相对路径angular2。模板和CSS的不同路径

3 个答案: