我目前正在尝试使用 Webpack 来捆绑我的所有文件，但在处理多个文件夹和.scss文件时我不知道如何进行。
我曾经使用 grunt 来完成这些任务，这是我的文件夹结构示例：
functions
- _mixin.scss
- _function.scss
- [...]
variables
- _colors.scss
- _typo.scss
- [...]
ui
- _button.scss
- _grid.scss
- [...]
view
- _home.scss
- _about.scss
- [...]
随着Grunt我将运行一个任务来生成一个名为main.scss包含所有的文件@import，例如：
@import 'function/_mixin.scss';
@import 'function/_function.scss';
@import 'variables/_colors.scss';
@import 'variables/_typo.scss';
[...]
目前我正在我的.js文件中指定一个导入（与 结合使用extract-text-webpack-plugin）来定义main.scss文件，但是每个新的import或旧的都需要手动添加/删除。有没有办法用 自动执行此任务WebPack？
我正在尝试在应用程序启动之前加载一些数据.我需要这样做的原因是因为某些菜单基于某些用户条件限制了访问,例如,基于用户位置.
因此,如果用户还没有位置或者它的位置未能访问某些视图,我需要阻止它.
我尝试使用Angular Resolve方法,但没有成功,这就是我所做的:
解决警卫
// The apiService is my own service to make http calls to the server.
@Injectable()
export class AppResolveGuard implements Resolve<any> {
constructor(
private _api: ApiService,
private _store: Store<IStoreInterface>,
) { }
resolve(): any {
return this._api.apiGet('loadData').subscribe(response => {
this._store.dispatch({
type: USER_FETCH_DATA,
payload: response.usuario
});
return response;
});
}
}
路由
export const routing = [
{
path: '', component: AppComponent, canActivateChild: [AuthGuard], resolve: {app: AppResolveGuard},
children: [
{ path: 'home', component: HomeComponent },
{ path: …我正在构建一个WebApp,整个项目基于AngularJS和PHP(作为后端),我在最后一部分,给它最后的接触,测试等等.我怀疑是否建议连接把我的所有.js文件合而为一.我问这个是因为我使用了很多代码,我自己编写的代码,以及第三方库,例如表单掩码,对话框,角度材料等.
我有2页结构,dist最终缩小.js文件的src文件夹,以及我拥有所有内容的文件夹.
src dist
??? app ??? js
? ??? .app-ctrl.js ? ??? .app.min.js
? ??? .app-dire.js ? ??? .angular.min.js
? ??? .app-fact.js ? ??? .angular-animate.min.js
? ??? .app-main.js ? ??? .angular-material.min.js
??? js ? ??? .[...etc...].min.js
? ??? .angular.min.js ??? lib
? ??? .angular-animate.min.js ??? .ngDialog.min.js
? ??? .angular-material.min.js ??? .ngMask.min.js
? ??? .[...etc...].min.js ??? .[...etc...].min.js
??? lib
??? .ngDialog.min.js
??? .ngMask.min.js
??? .[...etc...].min.js
然后在我的html文件中我正在加载这些文件,如下所示: …
我已经text-overflow: ellipsis在chrome和firefox上进行了测试,两者都缩短了文本,但它'...'最终没有显示出来.这有什么问题？
我已经使用其他解决方案,我发现这里如尝试min-width,max-width,flex: 0 1 auto,等等.但他们都不是工作.省略号没有出现.
这是我的代码:
ul {
display: flex;
height: 40px;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
}
ul li {
display: flex;
align-items: center;
height: 100%;
padding: 0 4px;
border-bottom: 1px solid #eee;
}
ul li:first-child {
width: 55px;
flex-shrink: 0;
}
ul li:first-child input {
width: 100%;
}
ul li:last-child {
width: 48px;
flex-shrink: 0;
}
ul li:nth-child(2) {
flex: 0 1 auto;
white-space: …我在Angular应用程序上使用Guard来解析初始关键数据.在Angular的第4版中,我喜欢这样:
// app.routing.ts
routing = [{
path: '', component: AppComponent, canActivate: [ResolveGuard],
}];
// resolve.guard.ts
@Injectable()
export class ResolveGuard implements CanActivate {
constructor(
private _api: ApiService,
) { }
canActivate(): any {
return this._api.apiGet('my/url').map(response) => {
if ( response.status === 'success') {
// Consume data here
return true;
}
return false;
}).first();
}
}
由于Angular 5上的新版本的Http不再使用该.map()属性,因此无效.
如果我.map()改为.subscribe()它不会抛出任何错误,但应用程序永远不会正确解决.另一方面,使用.first()和/或.map()抛出一些错误,正如此版本所预期的那样.
在这种情况下我该怎么办？
我只需要在加载初始数据时激活该路由.
编辑以添加有关该apiGet功能的信息:
constructor(private _http: HttpClient) {} …rxjs angular angular-router-guards angular-router angular-httpclient
我正在尝试使用如下表达式有条件地将类应用于我的组件:
.map(function(list, index) {
<div className={"myClass " + (position === index ? 'active' : null)}>
}
但它不断添加null为类,最终结果如下:
<div class="myClass active">...
<div class="myClass null">...
这是一个简单的例子,只有2个类名,所以我可以null用默认的类名替换.但是在更复杂的布局中,我需要一遍又一遍地复制相同的名称.
有没有更好的方法来解决这个问题？
我有一个问题,在我的网站上显示一个Facebook页面.我正在使用这里的新页面插件.
问题是,插件仅在我第一次加载页面时显示.如果我转到另一个页面而不是返回,插件将停止工作.我正在使用ajax在网站上导航并在页面上加载新内容.
我试图将facebook上的javascript代码分别放在每个页面上,但是没有用.还尝试使插件成为一个函数并调用它,$(document).ready并且也使用content.load(this.href,myFunction());但是也没有用.
无所谓,它只会在第一次加载时显示.
这是我正在使用的代码:
<body>
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.3&appId=289243507832799";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
[...rest of code...]
<div id="site"></div>
</body>
<div class="col-md-6">
<div class="fb_social">
<div class="fb-page" data-width="500" data-href="https://www.facebook.com/mypage" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/mypage"><a href="https://www.facebook.com/mypage">MyPage</a></blockquote></div></div>
</div>
</div>
<div class="col-lg-12">
<div class="fb_social">
<div class="fb-page" data-width="500" data-href="https://www.facebook.com/mypage" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/mypage"><a …我正在尝试在 grunt 中使用多个任务，其中一个是部分工作，另一个是not found task.
这个问题基于this one，我使用gruntfile.js相同的结构，这是这样的：
??? Gruntfile.js
??? grunt
??? config
? ??? conf_sass.js
? ??? conf_home.js
??? register
??? reg_sass.js
??? reg_home.js
有了这个各自的文件：
conf_sass.js
module.exports = function(grunt) {
grunt.config.set('sass', {
sass: {
options: {
style:'expanded',
compass: true
},
files: {
'src/css/app.css' : 'src/sass/app.scss'
}
},
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
files: {
'dist/css/app.min.css': 'src/css/app.css'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
};
reg_sass.js
module.exports = function(grunt) …我正在尝试创建一个指令来为我的输入创建自定义掩码。我知道我可以使用其他库，但有时我需要基于公司需求的自定义输入（例如“OS.012-08765”），所以我宁愿创建自己的指令。
到目前为止，我能够在我需要的模式上格式化数字，但不能在输入上，只能在模型上。对于这个例子，我将使用金钱输入，因为它更容易使用（我认为）。这是我正在使用的代码：
function myMoney() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ngModelCtrl) {
ngModelCtrl.$formatters.push( formatInput );
ngModelCtrl.$render = renderViewValue;
ngModelCtrl.$parsers.push( parseOutput );
function formatInput( value ) {
value = formatNumber(value);
return value;
}
function parseOutput( value ) {
value = formatNumber(value);
return value;
}
function renderViewValue() {
element.html( ngModelCtrl.$viewValue );
}
function formatNumber(value) {
if(!value) {
value = '000';
}
var checkValue = value.replace(/[^0-9\.]/g, '');
if(checkValue != value) {
value = checkValue;
}
value = value.toString(); …我正在尝试对组件内部的功能进行单元测试，此功能是根据初始条件从ngOnInit调用的：
ngOnInit() {
if (this.list.length === 0) {
return this.loadData();
}
return this.isLoading = false;
}
// I'm calling here because it could also be called from button on the UI
loadData() {
this.apiService.apiGet().subscribe((response) => {
// handle data
return this.isLoading = false;
}, (error) => {
// handle error
return this.isLoading = false;
})
}
但是，除非我在测试中手动调用该函数，否则我无法对其进行测试。这是我的测试代码：
// THIS CODE WORKS
it('should be false after calling loadData()', async(() => {
component.loadData();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(component.isLoading).toBeFalsy();
});
}));
// THIS …