我正在构建一个angular2应用程序.当我尝试为同一个组件加载多个样式表时,我遇到了多个问题.这是我正在做的代码:
import { Component } from '@angular/core';
@Component({
selector: 'my-tag',
templateUrl: 'my-tag.component.html',
styleUrls: [
'./style1.css',
'./style2.css'
]
})
export class MyTagComponent{}
现在这是我的问题:
当我尝试从其他目录中包含css文件时,如下所示:
styleUrls: [
'./style1.css',
'../public/style2.css'
]
我收到了错误
Uncaught Error: Expected 'styles' to be an array of strings.
在浏览器控制台中
然后我将第二个样式表包含在style2.css组件的目录中并编写了第一个代码段.现在正在加载样式,但它正在全局加载.第二个样式表具有与引导程序冲突的类名,而不是bootstrap的样式,第二个样式表的样式正在全局应用,即其他组件的模板正在从第二个样式表进行样式化.
列出的网址不应styleUrls仅应用于组件而不会损害其他组件吗？
任何人都可以告诉我如何为特定组件加载多个css文件,而不是全局应用.
我还尝试了以下变通方法,但样式正在应用于我制作的所有组件.
styles: [
require('./style1.css').toString(),
require('../public/style2.css').toString()
]
PS我使用webpack作为我项目的模块捆绑器.
webpack.config(节选)
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
我正在使用 webpack 模块打包器制作一个 angular2 应用程序。现在我添加了文件加载器，用于加载 jpg、gif、png 等图像文件。但是当我运行构建命令时，图像文件没有被捆绑。这是我的配置：
webpack.config.js （仅限图像加载器配置）
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=.+)?$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
我在我的 html 模板中包含了一个文件夹中的图像，如下所示：
<img src="/asset/img/myImg.png"/>
在我的 css 中也是：
#myBackground {
background: background: #344556 url(/assets/img/background.jpg) center/cover;
}
但是当我构建整个应用程序时，图像没有像我在 webpack 配置中指定的那样放置在资产文件夹中。
现在最奇怪的是字体使用相同的配置，它们是在资产文件夹中创建的。这是我用于在 style.css 中包含字体的 css：
@font-face {
font-family: 'robotolight';
src: url("../fonts/roboto-light-webfont.eot");
src: url("../fonts/roboto-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-light-webfont.woff2") format("woff2"), url("../fonts/roboto-light-webfont.woff") format("woff"), url("../fonts/roboto-light-webfont.ttf") format("truetype"), url("../fonts/roboto-light-webfont.svg#robotolight") format("svg");
font-weight: normal;
font-style: normal;
}
运行构建后，可以在assets文件夹中找到该字体的所有文件，如svgs、ttf、woff等。
谁能告诉我为什么没有在资产文件夹中创建图像，而在字体文件中创建了相同的配置/加载程序。
我是打字稿的新手.我已经定义了一些类.我已经将它们用作另一个类的属性的类型.例如:
fileone.ts
export class A {
propertyOne: string;
propertyTwo: string;
}
现在我在另一个文件中有另一个B类:
filetwo.ts
import { A } from './fileone';
export class B {
myProperty: A;
mySecondProperty: string;
}
我已经在另一个文件中实例化了这个B类.我有以下代码:
myapp.ts
import { B } from './filetwo';
export class C {
let myObj: B = new B();
myObj.myProperty.propertyOne = 'hello';
myObj.myProperty.propertyTwo = 'world'';
console.log(myObj);
}
现在,当我尝试设置A到B的属性时,它会说出以下错误:
Cannot set the property "propertyOne" of undefined
我们不能像在java中那样做吗？请解释为什么我现在无法做我正在做的事情.对此有什么正确的解决方法.请不要只是给我解决我的问题,但也解释.
我想为angular2应用程序配置路由.我的网址必须是这样的:
HTTP:// DOMAIN_NAME/constant_value/VARIABLE_VALUE/constant_value
网址可以是以下示例:
http://localhost/myhouse/floor1/mirror
http://localhost/myhouse/floor1/room1/mirror
http://localhost/myhouse/floor1/room1/bathroom/mirror
这里的路线/ myhouse和/ mirror是不变的.但中间部分可以是/ floor1或/ floor2 / something/something/....
如何在路由模块中为其定义路由.
const routes: Routes = [
{
path: 'myhouse',
children: [
{
path: ..., //here how do i configure it
children: [
{
path: '/mirror',
component: MirrorComponent
}
]
}
]
}
];
如果url在url 的末尾有/ mirror,那么必须加载镜像组件,如果不加载login组件的话.将为上面显示的URL加载镜像.根据url的可变部分,每个镜像组件内部将具有不同的属性值.
对于登录组件,网址将如下:
要么
要么
我试过想使用正则表达式,但似乎新版本的angular2不支持正则表达式.如果我错误地无法使用正则表达式,请通过示例向我指出这个方向.如果没有,请指出我正确的方向.