目的:我想在从一个页面点击到另一个页面时添加一个很好的过渡效果

我在网上尝试了很多解决方案,包括:

• Angular 2 - 动画路由器转换
• 使用Angular 2.0路由器和组件接口承诺的页面转换动画
• ....

一个共同点是它们都有类似position: absolute或position: fixed添加的样式,这打破了我现有的应用程序布局.

在使用角1我记得,有没有必要添加position: absolute到<div ui-view><div>

Angular 2还是4？

问题:

     **The left part** (#nav ul li) which float: left
     and **the right part** (#nav .search) which float: right
            **are not in a line**.

它应该是这样的:

但我的:

HTML:

<div id="nav">
   <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Contact</a></li>
   </ul>
   <div class="search">
     <input type="text" name="search" id="search" value="search">
   </div>       

CSS:

#nav ul li{
float: left;
list-style: none;
margin: 0 20px;
}

#nav .search{
float: right;
}

解决方案1:使用bootsrap构建布局而不是单独使用它,我在页脚上使用它,它完全在同一条线上!但我仍然不知道它是如何工作的

解决方案2:我使用margin-top:-20px来提取搜索框,但我不认为这是一个好习惯.

任何人都可以帮忙吗？非常感谢!

这里简单的演示:https://plnkr.co/edit/IA0Bs5VH9WwVbLlKPQ6X?p=preview(我使用官方的angular.io/docs演示应用程序)

问题是:第一个屏幕加载器(我使用loader.svg)动画在Angular App的初始加载过程中冻结了一秒钟

过程如下:打开页面,svg加载器动画启动 - >加载器动画冻结 - >加载器动画重新启动 - >角度应用程序完成加载,加载器隐藏

在这个演示中,冻结更明显:http://iarouse.com/dist-angular2-material/v1/

<my-app>
  <!-- the loader -->
  <div id="loader-container"></div>
</my-app>

我的真实应用程序更大,初始加载器动画在引导过程中冻结了几秒钟,这令人沮丧

我能做些什么让它变得光滑？

1问题:

我在项目中使用sass(s​​css)+指南针.

起初,我只是使用命令行观看,即" 指南针观看 ",一切运作良好.

昨天,我开始使用Codekit自动编译我的所有文件,使用完全相同的 style.scss文件,它出错了.

1.1一些细节:

我使用指南针来创建图像精灵,所以在我的.scss文件中我有两行:

@import "contact/*.png";
@include all-contact-sprites;

联系人文件夹是我放置所有.png图像的地方,它适用于命令行"罗盘手表",完全没有错误,但是当我使用Codekit时,它会一直出错.

1.2错误图像:

"语法错误:导入的文件未找到或不可读"

PS 作为一个新手,我知道这是我的问题,我知道这是一个愚蠢的问题,但是经过几个小时的搜索,我仍然无处可去,所以我发布了这个问题.

目的：我正在尝试为 ECharts（图表库）构建一个简单的 Angular 2 指令

细节：

我在 中创建图表ngAfterViewInit()，这是第一次，它有效，当窗口调整大小时图表会调整大小。

然后我单击到另一个页面，ngOnDestroy()运行，图表被销毁。

然后我点击返回图表页面，图表被重新创建，但是，这次图表不会在窗口大小调整时调整大小，而是console.log(chart)返回'undefined'而不是 echarts 实例。

如何再次获取echarts实例并使其可调整大小？

所有代码：

EChartsDirective以下是ECharts的全部代码：

import { Directive, ElementRef, Input } from '@angular/core';
let echarts = require('echarts');

@Directive({ selector: '[myECharts]' })

export class EChartsDirective {
    el: ElementRef;
    constructor(el: ElementRef) {
        this.el = el;
    }

    @Input() EChartsOptions: any;
    private mychart;


    ngAfterViewInit() {
        let chart = this.mychart = echarts.init(this.el.nativeElement);

        if (!this.EChartsOptions) return;

        this.mychart.setOption(this.EChartsOptions);

        $(window).on('resize', function(){
            console.log(chart);
            chart.resize(); // <- this …

我正在使用creacte-react-app 2.0.0-next.66cc7a90，它已经支持 Sass/Scss 文件

但是，使用 Sass/Scss 文件中的默认相对导入，我必须使用类似的代码 @import "../../../../../styles/variables/_variables.scss";

相反，我想使用绝对导入，这样我就可以使用代码导入 @import "styles/variables/_variables.scss";

我知道实现这一目标的一种方法是更新选项

{
   loader: "sass-loader",
   options: {
        includePaths: ["absolute/path/a", "absolute/path/b"]
 }

但我想在不弹出的情况下做到这一点，我该怎么做？使用react-app-rewired？

在这里演示

快速提问:在下面的代码中我只调用isSpecificPage()一次函数,为什么它控制台.log两次？

<div ng-hide="isSpecificPage()">
  <p>Hello!</p>
</div>

我想在 antd 表中添加反应组件，如 antd Icon、Progressbar、Tag 等

在在线文档中，没有任何演示，这可能吗？