Question

我必须在我的一个项目中使用High Charts，而只使用Angular4。但我得到以下错误，谷歌搜索后我发现每个人都建议升级到角5但在我的项目中我只能使用角4。请帮忙。

public class MyControlDesigner : ControlDesigner
{
    protected override void OnCreateHandle()
    {
        base.OnCreateHandle();
        var property = TypeDescriptor.GetProperties(this.Control)["BackgroundImage"];
        var resourceEditorSwitch = property.GetEditor(typeof(UITypeEditor)) as UITypeEditor;
        var editorToUseField = resourceEditorSwitch.GetType().GetProperty("EditorToUse",
            BindingFlags.NonPublic | BindingFlags.Instance);
        var editorToUse = editorToUseField.GetValue(resourceEditorSwitch);
        var resourcePickerUIField = editorToUse.GetType().GetField("resourcePickerUI",
            System.Reflection.BindingFlags.Instance |
            System.Reflection.BindingFlags.NonPublic);
        var resourcePickerUI = (Form)Activator.CreateInstance(resourcePickerUIField.FieldType);
        ModifyForm(resourcePickerUI);
        resourcePickerUIField.SetValue(editorToUse, resourcePickerUI);
    }
    void ModifyForm(Form f)
    {
        var resourceContextTableLayoutPanel = GetControl<TableLayoutPanel>(f, "resourceContextTableLayoutPanel");
        var resourceList = GetControl<ListBox>(f, "resourceList");
        resourceContextTableLayoutPanel.Controls.Remove(resourceList);
        var tableLayoutPanel = new TableLayoutPanel();
        tableLayoutPanel.Dock = DockStyle.Fill;
        tableLayoutPanel.Margin = new Padding(0);
        tableLayoutPanel.ColumnCount = 1;
        tableLayoutPanel.RowCount = 2;
        tableLayoutPanel.RowStyles.Add(new RowStyle(SizeType.AutoSize));
        tableLayoutPanel.RowStyles.Add(new RowStyle(SizeType.Percent, 100));

        List<string> list = new List<string>();
        var textBox = new TextBox() { Dock = DockStyle.Fill, Margin = resourceList.Margin };
        Action<string> applyFilter = (s) =>
        {
            if (string.IsNullOrEmpty(s))
            {
                resourceList.BeginUpdate();
                resourceList.Items.Clear();
                resourceList.Items.AddRange(list.ToArray());
                resourceList.EndUpdate();
            }
            else
            {
                var list2 = list.Where(x => x.ToLower().StartsWith(s.ToLower())).ToList();
                resourceList.BeginUpdate();
                resourceList.Items.Clear();
                resourceList.Items.Add("(none)");
                resourceList.Items.AddRange(list2.ToArray());
                resourceList.EndUpdate();
            }
            if (resourceList.Items.Count > 1)
                resourceList.SelectedIndex = 1;
            else
                resourceList.SelectedIndex = 0;
        };
        var resxCombo = GetControl<ComboBox>(f, "resxCombo");
        resxCombo.SelectedValueChanged += (s, e) =>
        {
            resxCombo.BeginInvoke(new Action(() =>
            {
                if (resourceList.Items.Count > 0)
                {
                    list = resourceList.Items.Cast<string>().ToList();
                    textBox.Text = string.Empty;
                }
            }));
        };
        textBox.TextChanged += (s, e) => applyFilter(textBox.Text);
        textBox.KeyDown += (s, e) =>
        {
            if (e.KeyCode == Keys.Up)
            {
                e.Handled = true;
                if (resourceList.SelectedIndex >= 1)
                    resourceList.SelectedIndex--;
            }
            if (e.KeyCode == Keys.Down)
            {
                e.Handled = true;
                if (resourceList.SelectedIndex < resourceList.Items.Count - 1)
                    resourceList.SelectedIndex++;
            }
        };
        tableLayoutPanel.Controls.Add(textBox, 0, 0);

        resourceList.EnabledChanged += (s, e) =>
        {
            textBox.Enabled = resourceList.Enabled;

        };
        tableLayoutPanel.Controls.Add(resourceList, 0, 1);
        resourceContextTableLayoutPanel.Controls.Add(tableLayoutPanel, 0, 4);
    }
    T GetControl<T>(Control c, string name)
        where T : Control
    {
        return (T)c.Controls.Find(name, true).FirstOrDefault();
    }
}

我的package.json如下：

ERROR in Error: Metadata version mismatch for module /home/ishant/HighChartDemo/node_modules/angular-highcharts/angular-highcharts.d.ts, found version 4, expected 3, resolving symbol AppModule in /home/ishant/HighChartDemo/src/app/app.module.ts, resolving symbol AppModule in /home/ishant/HighChartDemo/src/app/app.module.ts
at syntaxError (/home/ishant/HighChartDemo/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34)
at simplifyInContext (/home/ishant/HighChartDemo/node_modules/@angular/compiler/bundles/compiler.umd.js:24979:23)
at StaticReflector.simplify (/home/ishant/HighChartDemo/node_modules/@angular/compiler/bundles/compiler.umd.js:24991:13)
at StaticReflector.annotations (/home/ishant/HighChartDemo/node_modules/@angular/compiler/bundles/compiler.umd.js:24418:41)
at _getNgModuleMetadata (/home/ishant/HighChartDemo/node_modules/@angular/compiler-cli/src/ngtools_impl.js:138:31)
at _extractLazyRoutesFromStaticModule (/home/ishant/HighChartDemo/node_modules/@angular/compiler-cli/src/ngtools_impl.js:109:26)
at Object.listLazyRoutesOfModule (/home/ishant/HighChartDemo/node_modules/@angular/compiler-cli/src/ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/home/ishant/HighChartDemo/node_modules/@angular/compiler-cli/src/ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (/home/ishant/HighChartDemo/node_modules/@ngtools/webpack/src/plugin.js:241:66)
at _donePromise.Promise.resolve.then.then.then.then.then (/home/ishant/HighChartDemo/node_modules/@ngtools/webpack/src/plugin.js:495:24)
at process._tickCallback (internal/process/next_tick.js:109:7)

Answer 1

您需要安装@ angular4 angular-highcharts：

# install angular-highcharts and highcharts
npm i --save angular-highcharts@4 highcharts

# install highcharts typings
npm i --save-dev @types/highcharts

Highcharts不适用于角4

1 个答案: