URL Segment: 'main' 这个问题的处理很简单,是路由的路径写错了, import { NgModule } from '@angular/core'; import { Routes,...RouterModule.forRoot(routes)], exports: [RouterModule], }) export class MyRoutingModule { } 我的情况是在父组件中调用子路由的时候,出现这个问题的...,大家只需要更改一个地方, {path:'',redirectTo:'main',pathMatch:'full'} 把main 前的斜杠去了就好了,我想问题的原因是因为调用的是子路由,不用出现斜杠吧,...反正问题是解决了解决了
打开src/app/app.component.css设置样式 h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size...environments │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css...{ts,html,css,spec.ts} 通过html模板定义app,是应用基础组件 app/app.module.ts 描述如何定义应用 assets/* 用来放置图片和部署应用时需要的资源 environments...CLI会自动添加js和css资源 main.ts 应用的主要入口,基于JIT编译应用,并在浏览器中运行。...polyfills.ts 浏览器支持标准相关 styles.css 样式文件 test.ts 单元测试 tsconfig.
Angular2的动画系统赋予了制作各种动画效果的能力,致力于构建出与原生CSS动画性能相同的动画。 Angular2的动画主要是和@Component结合在了一起。...使用要点 Angular2的动画是使用模型驱动的方式在两个状态之间进行转换,是由状态和状态之间的转场效果所定义的。 动画被定义在@Component元数据中。...然后运行200毫秒,并且带缓动:'0.2s 100ms ease-out' 运行200毫秒,并且带缓动:'0.2s ease-in-out' 基于关键帧(Keyframes)的多阶段动画 类似于CSS3...Concepts)[https://blog.thoughtram.io/angular/2016/09/16/angular-2-animation-important-concepts.html] (angular2...官网-animations)[https://angular.cn/guide/animations] (css3-动画)[http://www.w3school.com.cn/css3/css3_animation.asp
1.通过ts来实现 //EmailComponent import { Component, OnInit} from '@angular/core'; /...
不过还好,经过这一段时间的倒腾,好歹把Angular2的东西稍微消化了一点,相比啥都不会,也算是有点收获吧。 基础配置 刚学习Angular2的时候,是照着他的中文文档上来的。...但是他也有很多的缺点,Angular2文档中列举了下面几点: 渲染得更快; 需要的异步请求更少; 需要下载的Angular框架体积更小; 提早检测模板错误; 更安全; 于是,Angular2又提出了一个新的编译方法叫...1.1; gzip_types text/plain application/javascript application/x-javascript text/javascript text/css...application/xml; } 这基本就是Angular2项目开发的基本过程了。...参考文章 angular-cli angular中文文档 nginx发布Angular2
模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Angular2将许多常用功能都分配到一个个的模块中,如:FormModule、HttpModule、RouterModule。...(Angular2中没有模块级别的service,所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中) ---- 3.imports:导入其他
Component的优点: 比普通directive要简单很多 更加严谨,更加规范化 更加适合组件化架构 component更容易升级到angular2 ---- Component只能控制它自己的视图和数据
对UI的描述自成一体,而不是采用CSS或者SCSS。...数据的传递不够直接还有一堆乱七八槽的属性 Android与IOS的代码不够一致 核心太小,一堆补充的库 Angular2的优点: 1、推荐TypeScript而不是原生的Javascript 2、类库特别多...,概念也是特别多 3、体量大 4、成熟度相对偏低,版本2才刚发布 5、不兼容1.x 6、Router还不成熟 综合以上我最终决定选择Angular2作为我前端开发的首选框架。...同时还有以下几个Bonus: 配置nativescript写原生应用,并且nativescript支持css子集,这一点比react要强一些,可以更小的降低学习成本与维护成本。...Angular2快速安装与入门 安装angular-cli npm install -g angular-cli 创建项目 ng new PROJECT_NAMEcd PROJECT_NAMEng serve
在接收值得组件里面导入ActivatedRoute 路由设置页面传参 { path: 'view/:mid' , component: ViewCompo...
组件:一种带有模板的指令;使用component来装饰组件类 属性指令:改变元素的外观或行为,如NgClass,NgStyle;使用Directive来装饰指...
ERROR in AppModule is not an NgModule 由于本人也只是略懂angular2,很多东西还不是特别的明白,对于错误的理解还不够深刻,所以对于angular2的错误尽量用最简单的方式解决...对于 ERROR in AppModule is not an NgModule 的错误,追根究底的话,应该是版本的问题,typescript的版本,具体是啥不清楚。
Angular2 初体验 Angular2 已经发布 beta9 , 是时候折腾一下了。...Angular2 和 AngularJS 1.x 相比, 可以说是全新的框架, 除了名字有延续性之外, 能延续的真的不多。...准备开发环境 Angular2 通过 npm 发布, 因此推荐使用 node/npm 环境, 要开始使用 Angular2 , 先准备一个目录 learning-angular , 在这个目录中初始化项目...npm install 使用 es5 开发 Angular2 应用 Angular2 是个客户端框架, 在浏览器中运行, 因此使用 Javascript (es5) 来做开发也是完全可行的。...>Hello, Angular2 Click me.
在console中不是打印出具体到哪个组件,而是打印出core.es5.js,这样对我的调试困难就加大了很多 如果不小心按到了chrome里的哪个调试开关的时候...
angular2最后想打包放到服务器,需要在文件目录运行 ng build 命令,运行完会生成一个 dist 目录,将这个目录放到服务器上就可以了。...但是这一过程出了点问题,打开index.html一片空白,控制台报错 ? image.png 打包生成的文件路径错误找不到文件。原因可能是我的文件不是直接放在服务器根目录下。...ng build --base-href /test/dist/ 或者 缩写ng build --bh /test/dist/ 访问的地址是http://localhost/test/dist/ 问题就解决了...要是图片引用还有问题可以把引用路径改为相对路径。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/101130.html原文链接:https://javaforall.cn
1.关于消除列表前的符号我相信很多人在初学CSS时会遇到该问题,无论是创作导航,还是列表,前面都会有个黑点点或其它符号。...解决该问题其实很简单采用list-style-type:none或list-style:none直接解决如果你想更换前面的黑点点,换成其他符号或图片图标 请看下面------>>>>>>2.如何插入或更换列表前的图标...如果还想清除前面的空格3.如何清除前面的空格间隙使用CSS的margin属性,将li元素的margin-left设置为0。...示例代码如下ul, ol { padding-left: 0;} li { margin-left: 0;}聊完列表,我们可以看看背景4.background-image的全覆盖重复问题像这种会自动铺满重复排列背景图片...例如,如果你想要设置文字缩进为20像素,可以使用以下代码:p { text-indent: 20px;}欢迎关注本人CSDN:CSS问题精粹1-CSDN博客互关谢谢大家
1.关于消除列表前的符号 我相信很多人在初学CSS时会遇到该问题,无论是创作导航,还是列表,前面都会有个黑点点或其它符号。...解决该问题其实很简单 采用list-style-type:none或list-style:none直接解决 如果你想更换前面的黑点点,换成其他符号或图片图标 请看下面------>>>>>> 2.如何插入或更换列表前的图标...注意事项: 项目符号图片的大小、颜色、透明度等属性可以通过其他CSS属性进行设置。 项目符号图片需要是透明背景的PNG格式,以免遮挡列表文本。...如果还想清除前面的空格 3.如何清除前面的空格间隙 使用CSS的margin属性,将li元素的margin-left设置为0。...示例代码如下 ul, ol { padding-left: 0; } li { margin-left: 0; } 聊完列表,我们可以看看背景 4.background-image的全覆盖重复问题
CSS 外边距合并问题 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。...如何解决 使用BFC解决margin合并问题可以参考这篇文章:CSS中重要的BFC 3.1 自身margin合并的情况 加个padding或者border-top/border-bottom 3.2.../scroll; 子元素的margin使用父元素的padding代替 ---- 网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~ 参考: CSS...外边距合并的问题 深入理解css中的margin属性 深入理解BFC和Margin Collapse
如果看成状态机 Promise 具有 3 个状态:pending、resolved、rejected(如果 Cancelable Promise 正式通过,那么...
它的By.css静态方法产生标准CSS选择器 predicate,与JQuery选择器相同的方式过滤。 detectChanges:在测试中的Angular变化检测。...真实的服务可能自身有问题。 这个测试套件提供了最小化的UserServiceStub类,用来满足组件和它的测试的需求。...---- 自己遇到的坑儿 下面都是自己在实际的编写单元测试时,真实遇到的问题,自己真的是在这上面花费了很多时间啊!!!为什么没有说花冤枉时间呢?...service的注入 刚刚接触angular2吧,对很多service的写法不是很了解,以至于真的是白白浪费了很多时间,尤其是在这个service的模拟上。...其实不是代码写的有问题,是单元测试写的有有问题,在第一个expect去判断的时候,第二个 service.getRelatedList已经执行完了,所以才会出错。