我正在使用Angular构建一个项目,我使用angular-cli启动了项目,当我尝试运行时,ng build --prod我不断收到此错误:
类型Object上不存在属性'description'
生成此错误的代码如下:
export class AppComponent {
product: Object = {};
constructor(
private store: StoreService,
private request: RequestService,
) {
this.product = this.request.getProduct(_id);
}
}
<p>{{product.description}}</p>
我正在阅读有关此内容的一些内容,错误是因为我使用类型定义将产品定义为Object,但我没有传递任何属性定义.
我知道我可以定义一个接口,就像我使用数组一样,但是我无法做到.我不知道我是否定义错了,这是我尝试的方式:
export interface ProductInterface {
id: Number;
description: String;
title: String;
}
product: Object<ProductInterface> = {};
但它也给了我错误.我需要做些什么才能避免这种情况？
我正在使用Angular4构建一个webapp,我正在尝试创建一个按钮来调用其他组件上的函数.
我在这里阅读其他类似的问题,但是他们有一个场景,其中组件是带有html声明的子组件或兄弟组件,例如:
<parent-component>
<child-component></child-component>
<sibling-component></sibling-component>
</parent-component>
但是,我正在开发一个不同的场景,因为我的组件是通过Invoked进行的routing,我无法使其工作.
基本上我header在页面上有一些控件来执行函数,但是这些函数需要触发/更改通过路由加载的其他组件上的数据.
例如,我有路由/store显示商店列表,我在这个页面上也有一个抽屉,我想在用户点击标题上的按钮时显示,这是问题,因为我无法传播事件从HeaderComponent到StoreComponent.
这些是我的文件:
header.component.ts
@Component({
selector: 'header',
templateUrl: `
<section class="container">
<button (click)="clickFilter()">Open filter</button>
</section>
`
})
export class HeaderComponent {
@Output() onFilter: EventEmitter = new EventEmitter();
clickFilter():void {
this.onFilter.emit('Register click');
}
}
store.component.ts
@Component({
templateUrl: 'store.html'
})
export class StoreComponent {
onFilterClick(event) {
console.log('Fire onFilterClick: ', event);
}
}
// store.html
<article class="card" (onFilter)="onFilterClick($event)">
Test
</article>
但这不起作用.
另外,我实际上不需要调用函数,我可以传递一个布尔值,例如,绑定到StoreComponent上的属性,然后在html文件中切换div.
我开始学习React,当我做一些测试时,我注意到两条警告信息:
警告:ReactTestUtils已移至react-dom/test-utils.更新引用以删除此警告.
警告:浅层渲染器已移至react-test-renderer/shallow.更新引用以删除此警告.
它们不会阻止测试运行也不会阻止正确验证,但始终存在此错误.
通过查看文档,我找到了这个页面,即使在我列出他们推荐的那些行之后,警告信息仍然显示出来.
我正在尝试一个非常简单的测试,这是我的代码:
import React from "react";
import toJson from "enzyme-to-json";
import { shallow } from "enzyme";
import { About } from "./About";
describe('Rendering test', () => {
const component = shallow(<About />);
const tree = toJson(component);
it('Should render the About component', () => {
expect(tree).toMatchSnapshot();
})
it('Should not contain an h2 element', () => {
expect( component.contains('h2') ).toBe(false);
})
})
为解决此警告,我需要做什么？我已将所有打包更新到最新版本.
我正在使用Angular4和开始我的第一个项目,sass并且我正试图弄清楚如何以sass正确的方式工作.我正在使用angular-cli并已设置默认样式以使用scss语法.我也已经定义了编译等.
但是我看到组件上有一个选项styleUrls,在某些情况下我们定义仅在该组件中使用的样式.
问题是,当我设置一个scss文件时,component它不会生成它自己的.css文件,既不包含在主.css文件中,而是从根项目生成的.
所以基本上我有一个像这样的项目结构:
app
app.module.ts
app.routing.ts
home
home.component.ts
home.html
_home.scss
client
client.component.ts
client.html
_client.scss
scss
_imports.scss
colors
_colors.scss
ui
_button.scss
_table.scss
//.. more folder and files
styles.scss
index.html
我希望能够css在styles.scss文件中设置主要样式,index.html稍后将在构建过程中将其插入到文件中.但也能够生成一个单一的css每个组件我有,如文件home和client,并且只使用那些css自己份内的风格component.
有可能吗？我试过这个,我没有找到任何关于此的其他资源!
我正在尝试使用purify-css for WebPack 从我的应用程序中删除未使用的css类.
要构建这个项目我全光照React,scss,WebPack并PostCss建立和编译一切.
到目前为止,我能够取得进展,但有一些问题,我不知道为什么,但预期结果不正确.我有一个非常非常基本的设置来测试这些场景,所以这是我的index.html和app.js文件(到目前为止我唯一的文件):
的index.html
<body>
<nav>
<a href="">home</a>
</nav>
<hr />
<div id="app"></div>
<footer class="my-other-heading"></footer>
</body>
app.js
class App extends React.Component {
render() {
return (
<h1 className="my-other-heading">Mamamia!</h1>
);
}
}
render(<App />, window.document.getElementById("app"));
在css文件中,我使用的是Normalize.css(带有一堆css classess),只有3个自定义类:
.my-class {
background-color: #CCDDEE;
}
.my-heading {
color: red;
}
.my-other-heading {
color: blue;
}
预期的输出应该只包含这些类:
html, body, nav, a, hr, div, footer, h1, .my-other-heading
但它有一些其他类:
.my-heading, h2, h3, h4, …我知道还有其他类似的问题,但我已经全部阅读过了,但没有一个能为我工作.
当我尝试将我的表单设置为原始时,我不断收到此错误:
TypeError: Cannot read property '$setPristine' of undefined
控制器和我的角度版本(1.4.2)一切都好,因为我还在调用$setPristine();方法的同一函数中发生了其他事情并且正在运行.
这是我正在使用的代码:
HTML
<form name="cadTel" novalidate>
<div class="form_group">
<label class="col-md-4 f--label"><i class="fa fa-asterisk"></i>Nome</label>
<div class="col-md-8 f--input">
<input type="text" name="ds_contato" ng-model="tel.ds_contato" ng-required="true" />
</div>
</div>
<div class="form_group">
<label class="col-md-4 f--label"><i class="fa fa-asterisk"></i>Telefone</label>
<div class="col-md-8 f--input">
<input type="text" name="num_tel" mask="(99) 9?9999-9999" ng-model="tel.num_tel" ng-required="true" />
</div>
</div>
<input type="button" class="bt-m bt-suc" name="cadastrar" value="Salvar" ng-click="add_telefone(tel)">
<div class="bt-m bt-war" ng-click="reset()">Limpar</div>
</form>
app.js
$scope.tel = {};
$scope.add_telefone = function(tel) {
$scope.tel = angular.copy(tel);
$http({
method: …我对 git 很陌生，我不知道我是怎么做到的，也不知道为什么它在我的终端上显示这个，但是当我打开 git 终端（从 sourcetree）时，我看到这样的分支名称：
c:/my/project/folder (develop|REBASE-i 1/13)
是什么原因造成的？我怎样才能删除这个？我记得以前它只显示分支名称(develop)。
我正在按照 Angular Material github 上的指南设置自定义全局配置以在小吃店模块上使用。这是我遵循的指南。
然而，由于在文档最高审计机关，没有出口的MAT_SNACK_BAR_DEFAULT_OPTIONS唯一MAT_SNACK_BAR_DATA，但它不是重写默认配置。
这是我尝试过的：
import { MatSnackBarModule, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
providers: [
{ provide: MAT_SNACK_BAR_DATA, useValue: { duration: 2500 } }
]
我也试过这样：
{ provide: MatSnackBarConfig, useValue: { duration: 2500 } }
{ provide: MatSnackBarConfig, useClass: SnackClass }
但没有一个选项有效。小吃在指定时间后永远不会自动关闭。
我目前正在尝试使用 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？
我想知道如何从我用来定义路线的组件中获取当前位置.例如,我有一个名为Routes的组件,它包含所有路由,如下所示:
class Routes extends React.Component {
render() {
return (
<Router>
<Nav />
<header>{customHeader}</header>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
// Other routes
</Switch>
</Router>
);
}
};
但是,当我尝试this.props.location.pathname像在其他组件中那样访问时,它会返回undefined.
在我需要使用的其他组件上withRouter,以便能够访问location信息.但我不能将它与Routes组件一起使用,因为它会引发错误.
我实际上并不需要pathname,我只想查看用户的路线,因为我在访问特定页面时会呈现不同的标题内容.
angular ×4
reactjs ×3
sass ×2
webpack ×2
angular-cli ×1
angular5 ×1
angularjs ×1
css ×1
git ×1
purifycss ×1
react-router ×1
typescript ×1
unit-testing ×1