小编Dan*_*ima的帖子

我在Angular 2 RC5中实现了一个自定义管道,它处理从服务器获取的数据.我遇到的问题是管道ngOnInit在我调用服务器的地方之前执行.

作为测试,我将已填充的列表传递给Pipe,一切都按预期工作.我遇到的唯一问题是在呈现页面时执行管道.所以那个案例中的清单是空的.

有没有办法"延迟"页面的呈现,以便在管道执行时它具有从服务器检索的数据？

这是我的代码示例:

零件

ngOnInit() {
    Observable.forkJoin([
        this.testService.get(),
        this.multilingualService.get(localStorage.getItem('currentPage'))
    ]).subscribe(servicesResult => {
        this.mainList = servicesResult[0];
        this.pageMultilinguals = servicesResult[1];
    },
    error => this.handleError(error));
}

管

@Pipe({name: 'multiLang'})
export class MultilingualPipe implements PipeTransform {
    transform(value: string, pageMultilinguals: Multilingual[], context: number): string {

        for (let i = 0; i < pageMultilinguals.length; i++) {
            if (pageMultilinguals[i].reference === value && pageMultilinguals[i].contexTypeId === context) {
                return pageMultilinguals[i].value;
            }
        }
    }
}

模板

<span>{{ 'Test' | multiLang: pageMultilinguals: 9 }}</span>

我在 Angular 2 应用程序的文件内使用 SASS 插值时遇到问题.scss。

Webpack 配置

loaders: [
    {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ['raw-loader', 'sass-loader', 'postcss-loader']
    },
    ...
],
postcss: [autoprefixer({ browsers: ['last 2 versions', '> 5%'] })]

...

导致错误的示例代码

$attr-name: border;
.test {
    #{$attr-name}-color: blue;
}

结果错误

如果我删除插值（即#{...}），我不会收到错误。我试图找出问题所在，但找不到与我有相同问题的人。

我的应用程序中的一项服务存在问题。问题是，无论在何处注入此服务，我都会收到以下错误：

Uncaught (in promise): Error: Can't resolve all parameters for TestComponent: ([object Object], ?, [object Object])

我知道这个问题可能是由于使用桶引起的，但是我没有将桶用于服务，而是“直接”引用文件，例如：../../core/services/config.service。

正如这个答案@Inject(forwardRef(...))中所建议的，我尝试在注入该服务的任何地方使用。我唯一的例外是AppComponent在这种情况下我“正常”注入相同的服务并且没有收到错误：

export class AppComponent implements OnInit {
    constructor(
        private configService: ConfigService, // NO ERROR
        private router: Router
    ) { }

    ...

}

在所有其他地方，如果我不执行以下操作，我会收到上述错误：

export class BuyButtonComponent {
    constructor(
        @Inject(forwardRef(() => ConfigService)) private configService: ConfigService,
        // private configService: ConfigService // DOES NOT WORK
    ) { }

    ...

}

据我了解，forwardRef()当要注入依赖项但尚未定义时使用。是ConfigService从CoreModule中导入的提供的AppModule。这些组件位于我拥有的a …

我正在尝试在我的应用程序中有一个无限滚动部分.为实现这一点,我正在使用此组件来处理滚动事件等.当滚动到达div的底部时,我正在调用一个函数来获取更多数据.到现在为止还挺好.

为了使这个功能更有效,我试图在调用之前等待几秒钟,并确保正确处理数据.为此,我一直在查看Angular网站上显示的示例,该示例展示了一个维基百科搜索.

我有一个类似于文章中显示的设置,我的问题是,当我打电话时,我收到以下错误switchMap():

Type 'void' is not assignable to type 'ObservableInput<{}>'

这是我的代码示例:

private scrollEndActive: Subject<boolean> = new Subject<boolean>();

ngOnInit() {
    ...
    this.scrollEndActive
        .debounceTime(1000)
        .distinctUntilChanged()
        .switchMap(data => {
            // ... get data from server
        })
}

...

// event to trigger call to server
scrollEnd() {
    this.scrollEndActive.next(true);
}

使用上面的代码,这就是我得到的:

从研究中我发现它似乎是一个与应该返回Observable相关的问题(Type'void'不能分配给'ObservableInput <{}>'类型).但就我而言,我不确定是什么问题.

我正在与:

• Angular 4.0.1
• TypeScript 2.2.2
• RxJS 5.2.0

我有一个简单的警报组件，该组件正在视图中动态创建。由于它是动态创建的，因此我设置了一个选项，在初始化警报后自动显示该警报。

尽管它可以正常工作，但我想了解为什么在这种特殊情况下为什么必须手动触发更改检测。

码：

export class OverlayMessageComponent implements AfterViewInit {
    ...

    ngAfterViewInit() {
        if(this.autoShow) {
            this.show();
        }
        this.changeDetector.detectChanges();
    }

    ...
}

完整样本： https : //plnkr.co/edit/8NvfhDvLVBd71I7DR0kW

我遇到this.changeDetector.detectChanges();以下错误时必须添加：

例外：检查表达式后，表达式已更改。

我的印象是使用AfterViewInit有助于避免该问题，但我认为我认为这是错误的。有没有一种方法可以更好地结构化代码以避免这种错误？

我想更好地理解为什么返回此错误。我之前已经看过几次这个错误，而且我知道有人说使用a setTimeout()或enableProdMode()确实可以解决问题，但是对我来说，当框架本身通知您存在问题时，这似乎是一种错误的解决方法。

我正在尝试一个简单的 Chrome 扩展示例，它应该能让我将任何打开的 youtube 标签的背景颜色更改为红色。我注意到的是，只有当我在实际页面上时，页面的背景才会变成红色，即它是活动选项卡。

代码：

function getYouTubeTabs() {
    queryInfo = {
        'url': '*://www.youtube.com/*'
    };

    chrome.tabs.query(queryInfo, function (result) {
        for (i = 0; i < result.length; i++) {    
            chrome.tabs.executeScript(result[i].id, {
                code: 'document.body.style.backgroundColor="red"'
            });
        }
    });
}

这是我的代码，我可能遗漏了一些东西。不确定是否可以在“非活动”选项卡上使用 executeScript。提前致谢。

编辑

清单文件

{
  "manifest_version": 2,

  "name": "First menu item",
  "description": "Testing Context Menus",
  "version": "1.0",

  "permissions": [
    "contextMenus", "tabs", "activeTab"
  ],
  "icons": {
    "16": "myicon.png",
    "128": "myicon2.png"
  },
  "background": {
    "scripts": ["background.js"]
  }
}

我一直在设置一个全局外部对象,然后我可以将其传递给我的Angular应用程序.我正在这样做,因为应用程序将提供给不同的网站,因此每个网站可以通过不同的配置.

这是我的设置:

的index.html

<script type="text/javascript">
    var appConfig = {
        welcome_msg: 'Welcome to Test App'
    };
</script>

导出应用程序中的appConfig对象(test-export.ts)

import { OpaqueToken } from '@angular/core';

export let APP_CONFIG = new OpaqueToken('appConfig');

在组件中注入appConfig

...

import { APP_CONFIG } from '../../app/test-export';

@Component({
    selector: `<home></home>`,
    providers: [
        { provide: APP_CONFIG, useValue: appConfig }
    ],
    styleUrls: [ './home.style.css' ],
    templateUrl: './home.template.html'
})

export class HomeComponent implements OnInit {
    constructor(@Inject(APP_CONFIG) private appConfig: any) { }
}

在模板中使用值

<h1>{{ appConfig.welcome_msg }}</h1>

所有上述工作正常,我在运行应用程序时没有错误,但是在我构建代码后,我收到以下错误:

Cannot find name …

我正在尝试在列表中添加交错动画。到目前为止，我已经成功地加载了交错动画。除了加载时，我希望在将新项目添加到数组时触发交错动画。

我按照这个例子： https : //medium.com/google-developer-experts/angular-applying-motion-principles-to-a-list-d5cdd35c899e

并提出了一个快速测试： https : //stackblitz.com/edit/angular-stagger-animation-test2

在app.component.ts我定义交错动画和在child.component.ts我定义元素的动画。

交错动画：

trigger('list', [
    transition(':enter', [
        query('@animate',
            stagger(250, animateChild())
        )
    ])
])

在query('@animate')得到孩子的构成要素，与animateChild()引发子组件动画。

儿童动画：

trigger('animate', [
  transition(':enter', [
    style({ opacity: 0, transform: 'translateY(-10px)' }),
    animate('250ms', style({ opacity: 1, transform: 'translateY(0px)' }))
  ]),
  transition(':leave', [
    style({ opacity: 1 }),
    animate('250ms', style({ opacity: 0, transform: 'translateY(10px)' }))
  ])
])

我的情况的主要区别在于我一次将多个对象添加到数组中。不知道有没有可能让新项目以交错的方式进入页面。